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
  • 示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後,項目結構如下所示: MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread] 特性用於需要與 COM 組件交互的應用程式,尤其是依賴單線程模型(如 Windows Forms 應用程式)的組件。在 STA 模式下,線程擁有自己的消息迴圈,這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • 在WinForm中使用全局異常捕獲處理 在WinForm應用程式中,全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理,可以有效地捕獲並處理未預見的異常,從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • 前言 給大家推薦一款開源的 Winform 控制項庫,可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫,同時也提供了工具類庫、擴展 ...
  • 說明 該文章是屬於OverallAuth2.0系列文章,每周更新一篇該系列文章(從0到1完成系統開發)。 該系統文章,我會儘量說的非常詳細,做到不管新手、老手都能看懂。 說明:OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友,請關註我吧(*^▽^*) ...
  • 一、下載安裝 1.下載git 必須先下載並安裝git,再TortoiseGit下載安裝 git安裝參考教程:https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit,Git客戶端,32/6 ...
  • 前言 在項目開發過程中,理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼,還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程:Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 一:背景 1. 講故事 前段時間有位朋友找到我,說他的窗體程式在客戶這邊出現了卡死,讓我幫忙看下怎麼回事?dump也生成了,既然有dump了那就上 windbg 分析吧。 二:WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死,入口門檻很低,後續往下分析就不一定了,不管怎麼說先用 !clrsta ...
  • 前言 人工智慧時代,人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API,工具不僅易於集成,還具備高效處理能力。 本文將介紹一款如何利用這些API,為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...