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] 即可

四.这是效果图,如果超过指定的阈值,相应的柱子就会变成变色,引起用户的警示 

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