echarts折线图每段显示不同的颜色

效果图

配置项：

zqChartFour: {
    title: {
      text: "一天用电量分布",
      subtext: "纯属虚构",
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "cross",
      },
    },
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: [
        "00:00",
        "01:15",
        "02:30",
        "03:45",
        "05:00",
        "06:15",
        "07:30",
        "08:45",
        "10:00",
        "11:15",
        "12:30",
        "13:45",
        "15:00",
        "16:15",
        "17:30",
        "18:45",
        "20:00",
        "21:15",
        "22:30",
        "23:45",
      ],
    },
    yAxis: {
      type: "value",
      axisLabel: {
        formatter: "{value} W",
      },
      axisPointer: {
        snap: true,
      },
    },
    visualMap: [
      {
        show: false,
        dimension: 0,
        seriesIndex: 0, //第一部分数据
        pieces: [
          {
            lte: 6,
            color: "orange",
          },
          {
            gt: 6,
            lte: 8,
            color: "red",
          },
          {
            gt: 8,
            lte: 14,
            color: "purple",
          },
          {
            gt: 14,
            lte: 17,
            color: "Chocolate",
          },
          {
            gt: 17,
            color: "pink",
          },
        ],
      },
      {
        show: false,
        dimension: 0,
        seriesIndex: 1, //第二部分数据
        pieces: [
          {
            lte: 3,
            color: "blue",
          },
          {
            gt: 3,
            lte: 8,
            color: "black",
          },
          {
            gt: 8,
            lte: 14,
            color: "green",
          },
          {
            gt: 14,
            lte: 17,
            color: "grey",
          },
          {
            gt: 17,
            color: "DodgerBlue",
          },
        ],
      },
    ],
    series: [
      {
        name: "用电量",
        type: "line",
        smooth: true,
        data: [
          300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400,
          500, 600, 750, 800, 700, 600, 400,
        ],
      },

      {
        name: "费用",
        type: "line",
        smooth: true,
        data: [
          200, 180, 150, 160, 170, 200, 450, 400, 300, 290, 280, 290, 300,
          400, 400, 650, 700, 600, 450, 300,
        ],
      },
    ],
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136