echart柱狀圖中每個柱子超過閾值改變顏色狀態

 echart是一個商業級別的數據圖標,一個純JavaScript的圖標庫,下面是中每個柱子超過閾值改變顏色狀態

  一.設置相關變量   

         var snames1=[];   
         var vals1=[];  
         var color1=[];

二.  通過ajax獲取相關數據進行處理

$.ajax({
                   type: "POST",
                   url:ctx+"/aum/getMeAsLi",
                   dataType:"json",
                   success:function(data){              
                   if(data){
                      for(var i=0;i<data.length;i++){  
                          //如果公司名稱存在時候,把公司名稱放入snames1
                         if(data[i].sorg_sname!==""||data[i].sorg_sname!==0) {
                             //push()方法可以向數組的末尾添加一個或是多個元素,並返回新的長度
                               snames1.push(data[i].sorg_sname);}else{
                               snames1.push(0);}  
                           //如果相應的數值存在時候,把公司名稱放入vals1
                            if(data[i].val!==""||data[i].val!==0) {
                                vals1.push(data[i].val);
                               }else{
                             vals1.push(0);
                            }
       三.根據組織機構名稱和數值進行判斷,如果相應的值超過閾值,則改變顏色     
       if(data[i].sorg_sname=="公司名1"&&data[i].val>=30) {color1.push('#F26865');}
                 else if(data[i].sorg_sname=="公司名1"&&data[i].val<30){color1.push('#4780F5');}
       if(data[i].sorg_sname=="公司名2"&&data[i].val>=40){
                 color1.push('#F26865');}
               else if(data[i].sorg_sname=="公司名2"&&data[i].val<40){color1.push('#4780F5');}
       if(data[i].sorg_sname=="公司名3"&&data[i].val>=30){
                color1.push('#F26865');}
             else if(data[i].sorg_sname=="公司名3"&&data[i].val<30){color1.push('#4780F5');}
       if(data[i].sorg_sname=="公司名4"&&data[i].val>=60){
                color1.push('#F26865');}
               else if(data[i].sorg_sname=="公司名4" && data[i].val<60){color1.push('#4780F5');}
       if(data[i].sorg_sname=="公司名5"&&data[i].val>=90){
              color1.push('#F26865');}
             else if(data[i].sorg_sname=="公司名5" && data[i].val<90){color1.push('#4780F5');}
             }

             }
         var myChart = echarts.init(document.getElementById('aa3b'));

 

三.將相關的數據放入option中 

itemStyle: {
                    normal: {
                    color: function(params) {
                           var colorList=color1;
                            return colorList[params.dataIndex] 即可

四.這是效果圖,如果超過指定的閾值,相應的柱子就會變成變色,引起用戶的警示 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章