多个背景颜色的线型图

最新推荐文章于 2021-06-27 00:13:08 发布

！sylar

最新推荐文章于 2021-06-27 00:13:08 发布

阅读量147

点赞数

本文链接：https://blog.csdn.net/AsuraSylar/article/details/103620314

版权

  var timeData = ['0:00', '0:30',
      '1:00', '1:30',
      '2:00', '2:30',
      '3:00', '3:30',
      '4:00', '4:30',
      '5:00', '5:30',
      '6:00', '6:30',
      '7:00', '7:30',
      '8:00', '8:30',
      '9:00', '9:30',
      '10:00', '10:30',
      '11:00', '11:30',
      '12:00', '12:30',
      '13:00', '13:30',
      '14:00', '14:30',
      '15:00', '15:30',
      '16:00', '16:30',
      '17:00', '17:30',
      '18:00', '18:30',
      '19:00', '19:30',
      '20:00', '20:30',
      '21:00', '21:30',
      '22:00', '22:30',
      '23:00', '23:30'
  ];

  option = {
      title: {
          text: '多个背景颜色图',
          x: 'left',
      },
      tooltip: {
          trigger: 'axis',

          axisPointer: {
              animation: false
          }
      },
    
      
      axisPointer: {
          link: {
              xAxisIndex: 'all'
          }
      },
   
      grid: [{
          left: 40,
          right: 100,
      }, {
          left: 40,
          right: 100,
      }],
      xAxis: [{
          type: 'category',
          boundaryGap: false,
          axisLine: {
              onZero: true
          },
          data: timeData
      }, {
          gridIndex: 1
      }],

      yAxis: [{
          type: 'value',
          max: 500,
          name: '单位:%',
          min: 0
      }, {
          gridIndex: 1
      }],
      series: [{
          name: '数值',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 9,
          showSymbol: false,
          lineStyle: {
              normal: {
                  width: 1
              }
          },
          markPoint: {
              data: [{
                  type: 'max',
                  name: '最大值'
              }, {
                  type: 'min',
                  name: '最小值'
              }]
          },
         markLine:{
           data:[
               {
               name: '高高报',
               yAxis: 420,
               label:{
                   normal:{
                    
                   formatter:function(){
                       return  '高高报420'
                   }    
                  }
               },
               lineStyle:{
                   normal:{
                       width:2,
                       color:'#f90224'
                   }
               }
              },
              {
               name: '高报',
               yAxis: 250,
               label:{
                   normal:{
                   formatter:function(){
                       return  '高报250'
                   }    
                  }
               },
               lineStyle:{
                   normal:{
                       width:2,
                       color:'#f97f02'
                   }
               }
              },
            ]  
         },
          markArea: {
              silent: true,
              label: {
                  normal: {
                      position: ['10%', '50%']
                  }
              },
              data: [
                  [{
                      name: '优',
                      yAxis: 100,
                      itemStyle: {
                          normal: {
                              color: 'rgba(0,153,153,0.27)'
                          }
                      },
                  }, {
                      yAxis: 200
                  }],
                  [{
                      name: '良',
                      yAxis: 200,
                      itemStyle: {
                          normal: {
                              color: 'rgba(153,204,51,0.2)'
                          }
                      },
                  }, {
                      yAxis: 300,
                  }],
                  [{
                      name: '差',
                      yAxis: 300,
                      itemStyle: {
                          normal: {
                              color: 'rgba(250,0,0,0.2)'
                          }
                      }
                  }, {
                      yAxis:999999
                  }]
              ]
          },
          data: [113, 132, 123, 122, 132, 132, 123, 225, 223, 232, 223, 222, 223, 312, 223, 222, 223, 222, 232, 262, 232, 232, 223, 222, 223, 332, 223, 232, 223, 322, 123, 222, 231, 322, 233, 122, 223, 232, 232, 222, 223, 232, 232, 222, 232, 132, 123, 212]

      }]
  };