zoukankan      html  css  js  c++  java
  • 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] 即可

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

  • 相关阅读:
    ExecuteScalar requires the command to have a transaction when the connection assigned to the command is in a pending
    如何从vss中分离程序
    String or binary data would be truncated
    the pop3 service failed to retrieve authentication type and cannot continue
    The POP3 service failed to start because
    IIS Error he system cannot find the file specified _找不到页面
    pku2575Jolly Jumpers
    pku2940Wine Trading in Gergovia
    pku3219二项式系数
    pku1029false coin
  • 原文地址:https://www.cnblogs.com/libaowen609/p/12819657.html
Copyright © 2011-2022 走看看