Echarts之折线图背景区域等级划分

需求：

鼠标移入：

实现：

<template>
  <div class="grade">
    <div id="grade-echart"></div>
    <div class="legend-list">
      <div class="legend-item" v-for="(item, index) in legendList" :key="index">
        <span
          class="item-color"
          :style="{ background: item.legendColor }"
        ></span>
        <span class="item-name">{{ item.legendName }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      legendList: [
        {
          legendName: "一级",
          legendColor: "#66FFFF",
        },
        {
          legendName: "二级",
          legendColor: "#FC5A5A",
        },
        {
          legendName: "三级",
          legendColor: "#00EA9C",
        },
        {
          legendName: "四级",
          legendColor: "#F3D74A",
        },
        {
          legendName: "五级",
          legendColor: "#4F9EFD",
        },
      ],
    };
  },
  methods: {
    initChart() {
      let colors = [
        "#66FFFF",
        "#FC5A5A",
        "#00EA9C",
        "#F3D74A",
        "#4F9EFD",
        "#FF923F",
        "#7662D6",
      ];
      let normolColor = "#A0B2D3";
      let option = {
        color: ["#FF923F"],
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "3%",
          top: "8%",
          bottom: "2%",
          containLabel: true,
        },
        xAxis: {
          type: "category",

          data: [
            "00.00",
            "02:00",
            "04:00",
            "06:00",
            "08:00",
            "10:00",
            "12:00",
            "14:00",
            "16:00",
            "18:00",
            "20:00",
            "22:00",
            "24:00",
          ],
          axisLabel: {
            color: normolColor,
            fontSize: 16,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          // boundaryGap: false, // type: "value" 设置
          boundaryGap: ["20%", "20%"], //type: "category" 设置
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: normolColor,
            fontSize: 16,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        series: [
          {
            data: [0.2, 2, 5, 4, 6, 9, 6.5, 5, 4.2, 3.6, 2.5, 1.6, 5],
            type: "line",
            // lineStyle: {
            //   color: "#FF923F", //折线颜色
            // },
            markArea: {
              silent: true,
              data: [
                [
                  {
                    yAxis: 0,
                    itemStyle: {
                      color: colors[0],
                    },
                  },
                  {
                    yAxis: 2,
                  },
                ],
                [
                  {
                    yAxis: 2,
                    itemStyle: {
                      color: colors[1],
                    },
                  },
                  {
                    yAxis: 4,
                  },
                ],
                [
                  {
                    yAxis: 4,
                    itemStyle: {
                      color: colors[2],
                    },
                  },
                  {
                    yAxis: 6,
                  },
                ],
                [
                  {
                    yAxis: 6,
                    itemStyle: {
                      color: colors[3],
                    },
                  },
                  {
                    yAxis: 8,
                  },
                ],
                [
                  {
                    yAxis: 8,
                    itemStyle: {
                      color: colors[4],
                    },
                  },
                  {
                    yAxis: 10,
                  },
                ],
              ],
            },
          },
        ],
      };
      let myChart = this.$echarts.init(document.getElementById("grade-echart"));
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.initChart();
  },
};
</script>

<style lang="scss" scoped>
.grade {
  width: 700px;
  height: 380px;
  background: rgba(2, 15, 43, 0.7);
  #grade-echart {
    width: 700px;
    height: 350px;
  }
  .legend-list {
    width: 100%;
    display: flex;
    justify-content: center;
    color: #a0b2d3;
    .legend-item {
      margin: 0 15px;
      span {
        display: inline-block;
      }
      .item-color {
        width: 10px;
        height: 10px;
        margin-right: 5px;
      }
    }
  }
}
</style>

以上