echarts 实现区域划分 折线图

先给出图表样式
这张图看上去是个普通的折线图，但是仔细看又有一些不同，首先它是有区域划分的，不同区域，对应的线条颜色不一样，其次y轴是自定义的，还有各种标记等，总之是有很多构思在里面。
echarts图例当中找了很多相似的折线图，但是都不能满足需求，于是动手自己绘制。

废话不多说，直接上代码，小伙伴们可以参考下：

	let dom = document.getElementById("ichart");
    dom.style.width = window.innerWidth / 4 + "px"; // 这一句可不加，这是手动设置图表宽度
    let gap = (300 - 40) / 100; // 300是图表高度；40是图表在组件位置的上下间隙综总和，也就是grid里面top + bottom； 100是y轴总数
    this.chart = echarts.init(dom);
    let option = { 
      grid: {
        left: 30,
        top: 10,
        bottom: 30,
        right: 40
      },
      xAxis: {
        type: "category",
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        data: [
          "00:00",
          "01:15",
          "02:30",
          "03:45",
          "05:00",
          "06:15",
          "07:30",
          "08:45"
        ]
      },
      yAxis: {
        type: "value",
        inverse: true,
        boundaryGap: false,
        min: 0,
        max: 100,
        minInterval: 20,
        maxInterval: 25,
        splitNumber: 4,
        axisPointer: {
          snap: true
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          textStyle: {
            color: "#6A767C"
          },
          formatter: function(value, index) {
            // Y轴的自定义刻度值，对应图上的y轴的值
            if (index == 0) {
              value = 0;
            } else if (index == 1) {
              value = 25;
            } else if (index == 4) {
              value = 100;
            } else {
              value = "";
            }
            return value + "";
          }
        }
      },
      visualMap: {
        show: false,
        dimension: 1,
        pieces: [
          {
            gt: 0,
            lte: 25,
            color: "#EEA04B"
          },
          {
            gt: 25,
            color: "#2676B8"
          }
        ]
      },
      series: [
        {
          name: "用电量",
          type: "line",
          symbol: "none",
          smooth: true,
          data: [90, 70, 50, 40, 30, 25, 10],
          lineStyle: {
            width: 3,
            type: "solid"
          },
          markPoint: {
           data: [{
             symbol: "rect",
             symbolSize: [3, gap * 25],
             x: 30,
             y: gap * 25 / 2 + 10, // 10是坐标系离左边的间隙，也就是grid里面的left
             itemStyle: {
               color: "rgba(238, 160, 75, 1)"
             },
           },{
             symbol: "rect",
             symbolSize: [3, gap * 75],
             x: 30,
             y: gap * 25 + gap * 75 / 2 + 10,
             itemStyle: {
               color: "rgba(38, 118, 184, 1)"
             },
           }]
          },
          markLine: {
            silent: true,
            symbol: "none",
            lineStyle: {
              width: 0
            },
            data: [
              {
                yAxis: 0,
                label: {
                  formatter: "需更换",
                  color: "#333D43"
                },
                itemStyle: {
                  color: "rgba(238, 160, 75, 0.12)"
                }
              },
              {
                
                yAxis: 25,
                label: {
                  formatter: "老化",
                  color: "#333D43"
                },
                itemStyle: {
                  color: "rgba(38, 118, 184, 0.12)"
                }
              },
              {
                yAxis: 100,
                label: {
                  formatter: "健康",
                  color: "#333D43"
                },
                itemStyle: {
                  color: "rgba(38, 118, 184, 0.12)"
                }
              }
            ]
          },
          markArea: {
            silent: true,
            data: [
              [
                {
                  yAxis: 0,
                  itemStyle: {
                    color: "rgba(238, 160, 75, 0.12)",
                  }
                },
                {
                  yAxis: 25
                }
              ],
              [
                {
                  yAxis: 25,
                  itemStyle: {
                    color: "rgba(38, 118, 184, 0.12)"
                  }
                },
                {
                  yAxis: 100
                }
              ]
            ]
          }
        }
      ]
    };
    this.chart.setOption(option);

markPoint，markArea，markLine都有运用，markPoint自动定位，好啦，搞定！