Echars仪表盘、饼图、柱形图的动态数据添加，以及柱形图改变颜色

1.仪表盘

html页面布局

 <div class="col-lg-4">
        <!-- sparkline stats -->
        <section class="panel">
          <header class="panel-heading">
            <span>隐患消除情况</span>
          </header>
          <div id="Chart1" style="height: 300px;"></div>
        </section>
      </div>
       <div class="col-lg-4">
        <!-- sparkline stats -->
        <section class="panel">
          <header class="panel-heading">
            <span>隐患数目统计(按风险级别)</span>
          </header>
          <div id="Chart3" style="height: 300px;"></div>
        </section>
      </div>
       <div class="col-lg-12">
        <!-- sparkline stats -->
        <section class="panel">
          <header class="panel-heading">
            <span>本年度各项目隐患情况</span>
          </header>
            <div id="Chart4" style="height: 300px;"></div>
        </section>
      </div>

仪表盘两个显示，并动态显示数据。

//在option最下面进行初始化
        var myChart1 = echarts.init(document.getElementById('Chart1'));
 $.ajax({
      type: "get",
      dataType:"json",
      url: "/dangerinformaticas/general", //获取json数据
      success: function (data) {
      //后台获取动态数据
        //mychars1
        //这里的名字是显示在仪表盘上面的
        var nameList=["消除率","及时率"];
        //将名字进行json格式转换
        JSON.stringify(nameList).toString();
        //这里是查询到的数据，取数据对仪表盘的动态数据赋值
        var math=data[4]/data[5]*100;
        var math1=data[3]/data[5]*100;
        //创建新的数组，将仪表盘的动态显示数据添加进去
        var datas=new Array();
        datas.push(math,math1);
        //这里定义的数组是仪表盘的数组，向数组中进行push仪表盘
        var seriesArray =new Array();
        //开始循环动态数据
        for(var i=0;i<datas.length;i++){
        //设置仪表盘在div中的位置
          center = i*50+25;
          center1=50
          size = 100;
          //仪表盘进行push，以下是仪表盘的样式
          seriesArray.push({
            name: '1',
            type: 'gauge',//echars仪表盘
            radius: '50%',
            center: [center+'%', center1+'%'], // 默认全局居中
            splitNumber: 10,
            axisLine: { // 坐标轴线
              lineStyle: { // 属性lineStyle控制线条样式
                color: [
                  [60 / 100, '#00cc99'],//根据实际数据动态改变
                  [1, '#e5fff9'],

                ],
                width: 8, //半径
                shadowColor: '#fff', //默认透明
                shadowBlur: 1
              }
            },
            pointer: {
              show:false
            },
            axisLabel: {// 坐标刻度数字
              show:false,

            },
            axisTick: { // 坐标轴小标记
              show: false
            },
            splitLine: { // 分隔线
              show: false
            },
            legend: {
              data:['业务指标']
            },
            detail: { //show : true ,
              formatter: '{value}%',
              offsetCenter: [0, '5%'],
              textStyle: {
                color: '#00cc99',
                fontSize: 30
              }
            },
             //循环进行填入数据
            data:[{name:nameList[i],value:datas[i]}]
          });

        }
          //option的设置
        var option1 = {
          series : seriesArray
        };
          //可以对option进行重新设置
        myChart1.setOption(option1,true);
        

2.饼状图显示

鼠标放在上面的效果

  //mychars3
  //初始化
    var myChart3 = echarts.init(document.getElementById('Chart3'));
  //因为对同一请求的数据进行处理，直接写在了一个ajax中
        if(data){
        //鼠标放上去后显示的那个字段信息
          var nameList3=["I级重大事故风险","II级重大事故风险","一般事故隐患"];
          JSON.stringify(nameList3).toString();
          var newData3=new Array();
          //将需要的数据push到数组中，这里的数据要和namelist3一一对应的
          newData3.push(data[0],data[1],data[2]);
          //循环进行设计str
          var str=new Array();
          for(var i=0;i<nameList3.length;i++){
            var str3=new Object();
            str3.name=nameList3[i];
            str3.value=data[i];
            str.push(str3);
          }
          myChart3.setOption({
            series:{
              name:['隐患数目'],
              data:str
            }
          })
        }
  //myChart3
  //样式的设置
  option3 = {
    tooltip : {
      trigger: 'item',
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient: 'horizontal',
      data: ['I级重大事故风险','II级重大事故风险','一般事故隐患']//显示在上面的颜色表示
    },
    series : [
      {
        name: '隐患数目',//鼠标点击出来的字段标识
        type: 'pie',
        radius : '55%',
        center: ['50%', '60%'],
        data:[],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ],
    color:[
      '#69beff','#8fc31f','#f35833'
    ]//这里的颜色是进行顺序显示的，不是柱形图那样按下标来的
  };
  myChart3.setOption(option3);

3.柱形图显示

  var myChart4 = echarts.init(document.getElementById('Chart4'));
 $.ajax({
      type: "get",
      dataType:"json",
      url: "/dangerinformaticas/groupCount/getOne?dProjectId="+dProjectId, //获取json数据
      success: function (data) {
        console.log(data)
        var nameList4=["处理中","已消除","及时消除","隐患总数","消除率","及时消除率"];
        JSON.stringify(nameList4).toString();
        //data的数据的处理
        var newData4=new Array();
        var handleNow=data[5]-data[4];
        var handleAgain=data[4]/data[5]*100;
        var handleOntime=data[3]/data[4]*100;
  newData4.push(handleNow,data[4],data[3],data[5],handleAgain,handleOntime);
        var strs=new Array();
        for(var i=0;i<nameList4.length;i++){
          var str4=new Object();
          str4.name=nameList4[i];
          str4.value=newData4[i];
          strs.push(str4);
          }
        myChart4.setOption({
          series:{
            name:['隐患数目'],
            data:strs
            }
          })
      },
    });
 //myChart4
  option4 = {
    tooltip: {
      trigger: 'axis',
    },
    legend: {
      data:['处理中','已消除','及时消除','隐患总数','消除率','及时消除率']
    },
    xAxis: [
      {
        type: 'category',
        data: ['处理中','已消除','及时消除','隐患总数','消除率','及时消除率'],
        axisPointer: {
          type: 'shadow'
        },
        "axisLabel": {
          "rotate": 45,
          "interval": 0
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        name: '数量',
        splitLine: {
          "show": false
        },
        splitArea: {
          "show": false
        },
        min: 0,
        max: 50,
        interval: 10
      },
      {
        type: 'value',
        name: '效率',
        splitLine: {
          "show": false
        },
        splitArea: {
          "show": false
        },
        min: 0,
        max: 100,
        interval: 20,
        axisLabel: {
          formatter: '{value}%'
        }
      }
    ],
    series: [
      {
        name:'',
        type:'bar',
        barWidth:'50',
        itemStyle:{
          normal: {//颜色的显示设置
            color:function (params) {
              var colorList = ['#f54882','#47d1de','#8058bd','#ffd84f','#47d1de','#f54882'];
              return colorList[params.dataIndex];
            }
          }
        },
        label: {
          normal: {
            show: true,
            position: 'top',
            textStyle: {
              color: '#69beff'
            }
          }
        },
        data:[]
      },
    ]
  };
  myChart4.setOption(option4);

总结：echars的这三种展示，数据处理其实差不多，对于单个的都是进行数据和名字的循环插入，要是一个div中显示多个，那只能是用数组来进行单个添加，数据也是进行单个显示。将数据处理好，data给空，写方法循环显示就行。

码出未来！！！！！！！！！