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

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

  • 相关阅读:
    jQuery 追加元素、拼接元素的方法总结(append、html、insertBefore、before等)
    Angular4.0 项目报错:Unexpected value xxxComponent' declared by the module 'xxxxModule'. Please add a @Pipe...
    数据库表约束的创建与使用之主键约束
    从零开始学虚拟DOM
    Typescript项目注意点和基本类型介绍
    JS操作符
    sass @function,@for,@mixin 的应用
    关于web优化(一)
    typescritp 导出默认接口
    The stacking context
  • 原文地址:https://www.cnblogs.com/libaowen609/p/12819657.html
Copyright © 2011-2022 走看看