echarts图表区间展示

![在这里插入图片描述](https://img-blog.csdnimg.cn/08b3b4d6c43b42479451cdfcfc813436.png#pic_center)

var that = this
this.$nextTick(() => {
       var option = null
       var chart = echarts.init(document.getElementById("temperatures"));
        var arr =[100,200,300,400,250]
        var max = Math.max.apply(Math, arr); //数据的最大值加裙交流330586621
        option = {
            tooltip: {
                trigger: 'axis',
                confine:true,
                show: true,
                transitionDuration: 0,  // 让toolltip紧跟鼠标
              //   axisPointer: {
              //   type: 'cross'
              // }
            },
          xAxis: {
            type: "category",
            boundaryGap: false,
            axisLabel: {
              interval: 0,//x轴全部显示
              textStyle: { //改变刻度字体样式
                color: '#fff',
                fontSize:12
              }
            },
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,0.05)"
                }
            },
            data: ['12:11','12:12','12:13','12.14','12:15'],
          },
          yAxis: {
            type: "value",
            splitNumber: 6,//坐标轴的分割段数，是一个预估值，实际显示会根据数据稍作调整。
            axisLabel: {
              formatter:function(value){
                return value.toFixed(0)  
              },
              textStyle: { //改变刻度字体样式
                color: "rgba(255,255,255,0.4)",
                fontSize:this.nowSize(12)
              }
            },
            splitLine: {
								// show:false,     //y网格线
								lineStyle:{
									color: "rgba(255,255,255,0.05)",
								}
							},
            axisLine: {
                lineStyle: {
                    color: "rgba(255,255,255,0)",
                }
            },
            scale: true, //自适应
            axisPointer: {
              snap: true,
            },
          },
          visualMap: {
            type:'piecewise',
            show: false,
            dimension: 1,
            seriesIndex: 0,
             pieces: [
             {
                gte: 300, //300-最大值区间为黄色
                lte: max, 
                color: '#FFD800'
             },
             {
                gte: 200,  //200-300区间为蓝色
                lte: 300, 
                color: '#03DAFD'
             },
              {
                gte: 0, 
                lte: 200,  //0-200区间为黄色
                color: '#FFD800'
             }
            ],
          },
         grid: {
            left: '6%',
            top: '10%',
            width: '85%',
            height: '80%',
            containLabel: true
        },
          series: [
            
            {
              name: "温度",
              type: "line",
              // smooth: true,
              showSymbol: true,//是否默认展示圆点
              symbol: 'circle',     //设定为实心点
              symbolSize: 6,   //设定实心点的大小
              // prettier-ignore
              data: arr,
               markLine: {
                symbol:'none',//去掉箭头
                data: [
                    {type: 'average',yAxis:200, name: '平均值',lineStyle:{color:'#FFD800',width:2}},//200为区间最小值基线
                    {type: 'average',yAxis:300, name: '平均值',lineStyle:{color:'#FFD800',width:2}}//300为区间最大值基线
                ],
                label: {
                    normal: {
                        formatter: '', // 这儿设置安全基线
                        type:'solid',
                        width:5
                    }
                }
            },
              markArea: {
                itemStyle: {
                  color: "rgba(255, 173, 177, 0.4)",
                },
                data: [
                  [
                    {
                      name: "Morning Peak",
                      xAxis: "07:30",
                    },
                    {
                      xAxis: "10:00",
                    },
                  ],
                  [
                    {
                      name: "Evening Peak",
                      xAxis: "17:30",
                    },
                    {
                      xAxis: "21:15",
                    },
                  ],
                ],
              },
            },
          ],
        };
         
        chart.setOption(option);
        
        window.addEventListener("resize", () => {
          chart.resize();
        });
      });