柱形图

作者: 兰夏天 | 来源:发表于2019-05-14 10:58 被阅读0次

    如图:


    bar.png

    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>
    

    相关文章

      网友评论

          本文标题:柱形图

          本文链接:https://www.haomeiwen.com/subject/yngjaqtx.html