Echarts根據數據長度變換柱狀圖柱狀的顏色

来源:https://www.cnblogs.com/suidiao122/archive/2019/01/10/10250607.html
-Advertisement-
Play Games

//查詢圖表數據 function GetData() { var qs = $("#qs").val(); var js = $("#js").val(); $.ajax({ url: '/YCGL_YCYSJLHIS/GetErrorOperate', type: 'GET', data: { ...


 //查詢圖表數據
            function GetData() {
                var qs = $("#qs").val();
                var js = $("#js").val();
                $.ajax({
                    url: '/YCGL_YCYSJLHIS/GetErrorOperate',
                    type: 'GET',
                    data: {
                        qs: qs,
                        js:js
                    },
                    async: false,
                    success: function (data) {
                        var Person=[], OperateC=[];
                        for (var i = 0; i < data.length; i++) {
                            Person.push(data[i].Person);
                            OperateC.push(data[i].OperateC);
                        };
                        Person.push();
                        initEchart(Person, OperateC);
                    },
                    error: function () {
                        alert("獲取圖表數據失敗!");
                    }


                });
            };
            //初始化圖表
            function initEchart(Person, OperateC) {
                var myChart = echarts.init(document.getElementById('middle'));
                // 顯示標題,圖例和空的坐標軸
                myChart.setOption({
                    title: {
                        text: '異常操作情況統計分析'
                    },
                    tooltip: {},
                    legend: {
                        data: ['操作次數']
                    },
                    xAxis: {
                        name: '操作人',
                        data: Person
                    },
                    yAxis: {
                        name: '操作次數'
                    },
                    series: [{
                        name: '操作次數',
                        type: 'bar',
                        barWidth: 30,
                        //label: {
                        //    normal: {
                        //        show: true,
                        //        position: 'inside'
                        //    }
                        //},
                        itemStyle: {
                            //通常情況下:
                            normal: {
                                //每個柱子的顏色即為colorList數組裡的每一項,如果柱子數目多於colorList的長度,則柱子顏色迴圈使用該數組
                                color: function (params) {
                                  
                                    var index_num = params.value;

                                    for (var i = 0; i < OperateC.length; i++) {

                                   //判斷數據是否大於1

                                        if (index_num > 1) {
                                            //var colorList = ['#ff7f50', '#87cefa', '#da70d6', '#32cd32', '#6495ed', '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0'];
                                            //return colorList[params.dataIndex];
                                            return '#ff7f50';
                                        }
                                        else {
                                            //var colorList = ['blue'];
                                            //return colorList[params.dataIndex];
                                            return '#87cefa';
                                        }
                                    }
                                    
                                    
                                }
                            },
                            //滑鼠懸停時:
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        },
                        data: OperateC
                    }
                    ]
                });
            };


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Jquery是一個JavaScript的函數庫,Jquery是一個寫得少但做的多的輕量級JavaScript庫 Jquery用美元$定義. Jquery的action執行對元素的操作 文檔就緒函數: Jquery中的ready中的方法可以再HTML文檔完全載入完之後在運行其中的代碼 Jquey選擇器 ...
  • 本文由雲+社區發表,作者:韓偉 互聯網開發的核心問題 當我1999年進入互聯網行業工作的時候,華為剛剛通過了著名的CMM認證。當時作為一個小程式員,非常嚮往業界經典的軟體開發模式。因為看上去,如果企業實行了CMM,我們程式員就不用再天天為了老闆一個拍腦袋的主意而加班開發了,各種各樣的奇葩需求和無理變 ...
  • DTD
    DTD: 文檔類型定義 規定我們書寫的HTML使用哪一種規範。 ...
  • setTimeout() 可以理解為 定時炸彈 >隔一段事件執行,並且只會執行一次 函數語法: setTimeout(參數1,參數2) 參數1:待執行的函數,可以在方法裡面寫匿名函數,也可以在外面寫好函數,這裡直接傳入函數名 參數2:執行函數觸發到執行的時間間隔,單位是毫秒 1s=1000ms 返回 ...
  • 1.onload事件 onload,頁面載入後執行,所謂頁面載入完成,指頁面上所有的元素創建完畢,引用的所有的外部資源(js、css、圖片)等下載完畢。 所以onload執行的比較晚,因為如果頁面上有好多好多圖片,它需要等這些圖片完成下載後才能執行。而寫在body後的< script >< /scr ...
  • 又開始公司的新項目了。。。又到了無聊的切圖時間,沒辦法,拿人錢財替人消災啊 ! 那當我們拿到公司新項目的時候我們需要做些什麼呢? 下麵就來分享一下我的工作步驟吧(僅使用於初學者,大神勿見怪 ,有不好的地方希望指出,十分感謝) 1. 整版瀏覽 這是一個廢話的過程。。。但是缺是必不可少的一步,我也不得不 ...
  • font-size 字型大小大小 一般推薦使用相對長度(px ,em),不推薦使用絕對長度(in,cmm,mm,pt) font-family 字體 1.可以同時指定多個字體,中間用英文狀態的逗號隔開,英文字體一般不需要加引號,中文字體需要添加英文狀態下的引號,當需要設置英文字體時,英文字體必須位於中文 ...
  • 在web網頁中,尤其是某些提交表單操作,需要驗證文本框輸入內容,本文利用文本框鍵盤事件和事件對象,對文本框只允許輸入數字方法進行總結。 1.鍵盤事件 keydown >鍵盤按下事件 keydown的時候,我們所按的鍵並沒有落入文本框 keyup >鍵盤彈起事件 keyup的時候,我們所按的鍵已經落入 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...