柱形图

如图：

html

     <div id="gatechart1" style="width:90%;height:200px;">

<script>
 setechart(id, xdata, gateStresslist, ntype) { // 柱形图
        var myChart = echarts.init(document.getElementById(id));
        var option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          // legend: {
          //   data: ['安全', '超负', '破坏']
          // },
          grid: {
            left: '10%',
            right: '12%',
            top: '10%',
            bottom: '20%',
            containLabel: false
          },
          xAxis: [{
            type: 'category',
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: { //坐标轴颜色
                color: '#018baf',
              }
            },
            axisLabel: { //坐标轴字体倾斜
              interval: 0, //但是为了掩饰需要注释掉倾斜，当真正的为时间的时候需要倾斜
              // rotate: 25 //但是为了掩饰需要注释掉倾斜，当真正的为时间的时候需要倾斜
            },
            data: xdata
            // (function () {
            //   var now = new Date();
            //   var res = [];
            //   var len = 12;
            //   while (len--) {
            //     res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
            //     now = new Date(now - 2000);
            //   }
            //   return res;
            // })()
            // data : ['周一','周二','周三','周四','周五','周六','周日']
          }],
          yAxis: [{
              //  name:'百分比',
              type: 'value',
              splitLine: {
                show: false, //控制网格线是否显示
                lineStyle: {
                  color: ['#018baf'] //控制网格线颜色
                }
              },
              axisLine: {
                lineStyle: { //控制坐标轴颜色
                  color: '#018baf',
                }
              },
              min: -0.50,
              max: 0.50,
              interval: 0.15,
            }

          ],
          series: [{
            name: '安全',
            // type: 'bar',
            type: ntype,
            barWidth: 10,
            itemStyle: {
              normal: {
                //   color: '#00ffea', // 柱状图的颜色
                color: function (params) { //根据数值大小显示柱状图的颜色，同一类
                  var index_color = params.value;

                  if (Math.abs(index_color) >= 0 && Math.abs(index_color) < 0.25) {
                    return '#00ffea';
                  } else if (Math.abs(index_color) >= 0.25 && Math.abs(index_color) < 0.4) {
                    return '#f3ff68';
                  } else if (Math.abs(index_color) >= 0.4 && Math.abs(index_color) < 0.5) {
                    return '#bf5aff';
                  }
                },

                // color: function () {
                //   // for(var ite of gateStresslist){
                //   //   if(ite>0.3){
                //   //     return 'red'
                //   //   }else{
                //   //     return '#00ffea'
                //   //   }
                //   // }
                //   // gateStresslist
                //   //  return 'red'
                //   return '#00ffea'
                // }
              }
            },

            label: {
              normal: {
                show: true,
                position: 'inside',
                color: 'red'
              }
            },
            // data:[0.200, 0.170, 0.240, 0.244, 0.200, 0.220, 0.210]
            data: gateStresslist
          }, ]
        };

        //======== start 这个是实时函数，根据当前时间一直改变横为当前时间轴时间点段范围，及柱形图的数据也会随机变化，但是为展示需要注释掉让其显示静态
        setInterval(function () {
          var axisData = (new Date()).toLocaleTimeString().replace(/^\D*/, '');
          var data0 = option.series[0].data;
          data0.shift();
          //  var that = this
          data0.push((Math.random() - 0.5).toFixed(2));
          //        that.sernum++
          //         if (that.sernum) {
          //            that.sernum=!that.sernum
          // data0.push((Math.random() * 0.5).toFixed(2));
          //         //  data0.push((parseFloat( (Math.random() * 0.5).toFixed(2))).toString());
          //         } else  {
          //           that.sernum=!that.sernum
          //       data0.push(-(Math.random() * 0.5).toFixed(2));

          //data0.push((-parseFloat( (Math.random() * 0.5).toFixed(2))).toString());
          //}
          // option.xAxis[0].data.shift(); //这个就是实时改变当前时间每添加一个新时间前除去一个旧时间
          // option.xAxis[0].data.push(axisData);// 这个就是实时改变当前时间
          myChart.setOption(option);
        }, 2100);
        //======== end 这个是实时函数，根据当前时间一直改变横为当前时间轴时间点段范围，及柱形图的数据也会随机变化，但是为展示需要注释掉让其显示静态
        myChart.setOption(option);
      }

 //this.setechart('gatechart1', this.xdata(12), this.gateStress(12), 'bar') // 实时 动态的，根据当前时间
      // setechart('gatechart2', this.xdata(9), this.gateStress(9), 'bar') // 实时 动态的，根据当前时间

      var xdataone = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
        datatwo = [1, 2, 3, 4, 5, 6, 7, 8, 9],
        gateStressone = [0.20, 0.37, 0.24, -0.24, 0.20, -0.22, 0.21, -0.48, 0.11, -0.18, 0.17, 0.24],
        gateStresstwo = [-0.24, 0.20, -0.22, 0.21, -0.38, 0.11, -0.18, 0.17, 0.44];
      setechart('gatechart1', xdataone, this.gateStress(12), 'bar') // 实时 动态的，根据当前时间
      setechart('gatechart2', datatwo, this.gateStress(9), 'bar') // 实时 动态的，根据当前时间

      // setechart('gatechart1', xdataone, gateStressone, 'bar') // 静态的 为展示效果
      // setechart('gatechart2', datatwo, gateStresstwo, 'bar') // // 静态的 为展示效果
</script>