效果图：

代码实例：

     let option = {
        calculable: true,
        legend: {
          orient: 'vertical',
          top: '10%',
          left: 'right'
        },
        tooltip: {
          show: true,
          formatter: '{a} {b} : {c} '
        },
        xAxis: [
          {
            type: 'category',
            data: Array.from({ length: 12 }).map((a, index) => `${index + 1}月`),
            axisLine: {
              //x轴线的颜色以及宽度
              show: true, //是否显示X轴
              lineStyle: {
                color: '#333'
              }
            },
            axisLabel: {
              // interval: 0,  //间隔几条显示
              // rotate: 20,  // 切斜度数
              fontSize: 12 //字体大小
            },
            axisTick: {
              //是否显示刻度线
              show: false
            }
          }
        ],
        yAxis: [
          {
            name: '哈哈哈',
            type: 'value',
            axisTick: {
              //y轴刻度线
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#333' //纵坐标刻度文字颜色
                // color: '#f2eded',//纵坐标刻度文字颜色
              }
            },
            splitLine: {
              //网格线
              show: true, //是否显示
              lineStyle: {
                //网格线样式
                color: 'rgba(192,192,192,0.2)', //网格线颜色
                width: 1, //网格线的加粗程度
                type: 'dashed' //网格线类型
              }
            }
          }
        ],
        // 整体大小
        grid: {
          left: '0%',
          right: '0%',
          top: '23%',
          bottom: '30',
          containLabel: true,
          borderColor: 'transparent'
        },
        series: [
          {
            name: '损耗曲线',
            type: 'line',
            data: lineData,
            symbolSize: 2, //设置圆点大小为10
            itemStyle: {
              color: '#FEFA00'
            }
            // areaStyle: {
            //   normal: {
            //     //颜色渐变函数 前四个参数分别表示四个位置依次为左、下、右、上
            //     color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //       {
            //         offset: 0,
            //         color: 'rgba(254, 250, 0,0.2)'
            //       },

            //       {
            //         offset: 1,
            //         color: '#FEFA00'
            //       }
            //     ])
            //   }
            // } //区域颜色渐变
          },
          {
            name: '',
            type: 'bar',
            animation: false,
            areaStyle: {
              normal: {}
            },
            lineStyle: {
              normal: {
                width: 1
              }
            },
            markArea: {
              silent:true,//不响应鼠标
              data: [
                [
                  {
                    // name: '事件执行时段',
                    itemStyle: {
                      color: 'rgba(190,76,89,0.5)' //颜色设置
                    },
                    yAxis: '0',
                    label: {
                      show: true,
                      position: ['1%', '45%'],
                      color: '#e5e5e5',
                      fontStyle: 'oblique',
                      fontSize: 15,
                      // rotate: 90,
                      formatter: '区域1'
                    },
                   
                  },
                  {
                    yAxis: '10'
                  }
                ],
                [
                  {
                    itemStyle: {
                      color: 'pink' //颜色设置
                    }, 
                    yAxis: '10',
                    label: {
                      show: true,
                      position: ['1%', '45%'],
                      color: '#e5e5e5',
                      fontStyle: 'oblique',
                      fontSize: 15,
                      // rotate: 90,
                      formatter: '区域2'
                    }
                  },
                  {
                    yAxis: '30'
                  }
                ],
                [
                  {
                    itemStyle: {
                      color: '#4ccacf' //颜色设置
                    }, 
                    yAxis: '30',
                    label: {
                      show: true,
                      position: ['1%', '45%'],
                      color: '#e5e5e5',
                      fontStyle: 'oblique',
                      fontSize: 15,
                      // rotate: 90,
                      formatter: '区域3'
                    }
                  },
                  {
                    yAxis: '45'
                  }
                ],
                [
                  {
                    itemStyle: {
                      color: 'green' //颜色设置
                    }, 
                    yAxis: '45',
                    label: {
                      show: true,
                      position: ['1%', '45%'],
                      color: '#e5e5e5',
                      fontStyle: 'oblique',
                      fontSize: 15,
                      // rotate: 90,
                      formatter: '区域4'
                    }
                  },
                  {
                    yAxis: '100'
                  }
                ]
              ]
            }
          }
        ]
      }