vue实现echarts中 9种 折线图图例

let datas = [
  { DivideScore: 7, UserScore: 7.2, Name: '目标制定' },
  { DivideScore: 7, UserScore: 7, Name: '具体性' },
  { DivideScore: 7, UserScore: 7.5, Name: '可衡量性' },
  { DivideScore: 7, UserScore: 7, Name: '可实现性' },
  { DivideScore: 7, UserScore: 7, Name: '时间限定' }
];
let aveList = datas.map((n) => {
  return n.DivideScore;
});
let uList = datas.map((n) => {
  return n.UserScore;
});
let nameList = datas.map((n) => {
  return n.Name;
});
option = {
  xAxis: {
    type: 'category',
    data: nameList
  },
  yAxis: {
    type: 'value',
    max: 10,
    axisLabel: {
      formatter: '{value} 分'
    }
  },
  series: [
    {
      type: 'line',
      data: uList,
      color: '#326092',
      label: {
        show: true,
        fontSize: 16,
        position: 'top'
      },
      markLine: {
        itemStyle: {
          color: '#3dc6c8'
        },
        label: {
          fontSize: 16,
          formatter: '平均分',
          itemStyle: {
            color: '#3dc6c8'
          },
          padding: [0, 0, 2.2, 0],
          position: 'end'
        },
        data: [
          [
            {
              name: '两点之间的线',
              coord: [0, aveList[0]]
            },
            {
              name: '两点之间的线',
              coord: [4, aveList[0]]
            }
          ]
        ]
      }
    }
  ]
};
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

let datas = [
  { UserScore: 13, Name: '11-23' },
  { UserScore: 15, Name: '11-24' },
  { UserScore: 19, Name: '11-25' },
  { UserScore: 26, Name: '11-26' },
  { UserScore: 18, Name: '11-27' },
  { UserScore: 15, Name: '11-28' },
  { UserScore: 14, Name: '11-29' }
];
let uList = datas.map((n) => {
  return n.UserScore;
});
let nameList = datas.map((n) => {
  return n.Name;
});
 
option = {
  tooltip: {
    trigger: 'axis'
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: nameList,
    axisLabel: {
      textStyle: {
        color: '#333',
        fontSize: 20
      }
    },
    // x轴颜色
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    boundaryGap: [0, '30%'],
    max: 40,
    // y轴文字颜色
    axisLabel: {
      show: false,
      formatter: '{value} °C'
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    },
    // 取消网格线
    splitLine: {
      show: false
    }
  },
  series: [
    {
      name: '实时温度',
      type: 'line',
      symbolSize: 8, //折线点的大小
      data: uList,
      label: {
        normal: {
          show: true,
          fontSize: 20,
          position: 'top',
          formatter: '{c} °C'
        }
      },
      color: '#0097F5'
    }
  ]
};
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

option = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [
        { name: '土壤含水量', icon: 'circle' },
        { name: '土壤温度', icon: 'circle' },
        { name: '土壤电导率', icon: 'circle' }
      ],
      itemWidth: 6, //宽度
      itemHeight: 6, //高度
      itemGap: 30, //间距
      textStyle: {
        color: '#333',
        fontSize: 20,
        lineHight: 20
      }
    },
    xAxis: [
      {
        type: 'category',
        axisTick: {
          alignWithLabel: true
        },
        axisLine: {
          onZero: false,
          lineStyle: {
            color: '#333'
          }
        },
        axisLabel: {//坐标轴刻度标签的相关设置。
          textStyle: {
            color: '#333',
            fontSize:20
          },
          formatter: function (params) {
            var newParamsName = "";// 最终拼接成的字符串
            var paramsNameNumber = params.length;// 实际标签的个数
            var provideNumber = 10;// 每行能显示的字的个数
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
            /**
             * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
             */
            // 条件等同于rowNumber>1
            if (paramsNameNumber > provideNumber) {
              /** 循环每一行,p表示行 */
              for (var p = 0; p < rowNumber; p++) {
                var tempStr = "";// 表示每一次截取的字符串
                var start = p * provideNumber;// 开始截取的位置
                var end = start + provideNumber;// 结束截取的位置
                // 此处特殊处理最后一行的索引值
                if (p == rowNumber - 1) {
                  // 最后一次不换行
                  tempStr = params.substring(start, paramsNameNumber);
                } else {
                  // 每一次拼接字符串并换行
                  tempStr = params.substring(start, end) + "\n";
                }
                newParamsName += tempStr;// 最终拼成的字符串
              }
 
            } else {
              // 将旧标签的值赋给新标签
              newParamsName = params;
            }
            //将最终的字符串返回
            return newParamsName
          }
 
        },
        data: ['2020/11/24 09:56:23', '2020/11/25 09:56:23', '2020/11/26 09:56:23', '2020/11/27 09:56:23']
      }
    ],
    yAxis: [
      {
        type: 'value',
        // y轴文字颜色
        axisLabel: {
          textStyle: {
            color: '#333',
            fontSize:20
          }
        }
      }
    ],
    series: [
      {
        name: '土壤含水量',
        type: 'line',
        smooth: true,
        data: [320, 332, 301, 334]
      },
      {
        name: '土壤温度',
        type: 'line',
        smooth: true,
        data: [120, 132, 101, 134]
      },
      {
        name: '土壤电导率',
        type: 'line',
        smooth: true,
        data: [862, 1018, 964, 1026],
        markLine: {
          lineStyle: {
            type: 'dashed'
          },
          data: [
            [{ type: 'min' }, { type: 'max' }]
          ]
        }
      },
    ]
  };
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

option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985'
        }
      }
    },
    legend: {
      orient: 'horizontal',
      data: [
        {
          name: '水温',
          icon: 'circle'// 用圆点替换
        },
        {
          name: '浊度',
          icon: 'circle'
        },
        {
          name: '酸碱度',
          icon: 'circle'
        },
        {
          name: '化学需氧量',
          icon: 'circle'
        },
        {
          name: '总氮',
          icon: 'circle'
        },
        {
          name: '总磷',
          icon: 'circle'
        },
        {
          name: '溶解氧',
          icon: 'circle'
        },
        {
          name: '水电导率',
          icon: 'circle'
        }
      ],
      itemWidth: 6, //宽度
      itemHeight: 6, //高度
      itemGap: 30,  //间距
      textStyle: {
        color: '#333',
        fontSize: 16,
        lineHight: 20
      }
    },
    grid: {
      top: 100,
      left: 5,
      right: 30,
      bottom: 5,
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: false,
        data: ['11/9', '11/10', '11/11', '11/12'],
        axisLabel: {
          color: '#333',
          fontSize: 18
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      }
    ],
    yAxis: [
      {
        type: 'value',
        max: 1.0,
        min: 0,
        axisLabel: {
          color: '#333',
          fontSize: 16
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        // 网格颜色
        splitLine: {
          lineStyle: {
            color: '#00A0E9',
            opacity: 0.5
          }
        }
      }
    ],
    series: [
      {
        name: '水温',
        smooth: true,
        type: 'line',
        stack: '总量',
        areaStyle: {},
        data: [0.1, 0.12, 0.01, 0.1]
      },
      {
        name: '浊度',
        smooth: true,
        type: 'line',
        stack: '总量',
        areaStyle: {},
        data: [0.1, 0.12, 0.1, 0.1]
      },
      {
        name: '酸碱度',
        smooth: true,
        type: 'line',
        stack: '总量',
        areaStyle: {},
        data: [0.1, 0.12, 0.2, 0.1]
      },
      {
        name: '化学需氧量',
        smooth: true,
        type: 'line',
        stack: '总量',
        areaStyle: {},
        data: [0.1, 0.12, 0.2, 0.1]
      },
      {
        name: '总氮',
        smooth: true,
        type: 'line',
        stack: '总量',
        areaStyle: {},
        data: [0.1, 0.12, 0.1, 0.1]
      },
      {
        name: '总磷',
        smooth: true,
        type: 'line',
        stack: '总量',
        areaStyle: {},
        data: [0.1, 0.12, 0.2, 0.1]
      },
      {
        name: '溶解氧',
        smooth: true,
        type: 'line',
        stack: '总量',
        areaStyle: {},
        data: [0.1, 0.12, 0.1, 0.1]
      },
      {
        name: '水电导率',
        smooth: true,
        type: 'line',
        stack: '总量',
        areaStyle: {},
        data: [0.1, 0.1, 0.2, 0.1]
      },
    ]
  };
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170

option = {
  xAxis: {
    type: 'category',
    boundaryGap: false,
    axisLabel: {
      textStyle: {
        color: '#999', //坐标的字体颜色
        fontSize: 20
      }
    },
    data: ['6月21日', '6月22日', '6月23日', '6月24日', '6月25日', '6月26日', '6月27日']
  },
  yAxis: {
    type: 'value',
    axisLabel: {
      textStyle: {
        color: '#aaa', //坐标的字体颜色
        fontSize: 20
      }
    },
    axisLine: {
      show: false
    },
    axisTick: {
      show: false
    }
  },
  tooltip: {
    trigger: 'axis'
  },
  series: [
    {
      data: [108, 100, 90, 78, 108, 128, 132],
      type: 'line',
      symbolSize: 5, //设定实心点的大小
      symbolColor: '#2e6bd3',
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(48, 115,230)'
          },
          {
            offset: 1,
            color: 'rgb(13, 34, 66)'
          }
        ])
      },
      label: {
        show: true,
        position: 'top',
        textStyle: {
          color: '#999',
          fontSize: 20
        }
      },
      lineStyle: {
        color: '#2e6bd3'
      }
    }
  ]
};
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

option = {
  grid: {
    top: '20%',
    left: '5%',
    right: '5%',
    bottom: '3%'
  },
  title: {
    text: '期待的我',
    left: 'center'
  },
  xAxis: {
    type: 'category',
    data: ['D', 'I', 'S', 'C'],
    show: true,    // 是否显示x轴
    position: 'top',    // x轴的位置（top/bottom）
    axisTick: {
        show: false    // 是否显示坐标轴刻度
    },
    axisLabel: {
        show: true,     // 是否显示刻度标签
        interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        color: '#fff',// 刻度标签文字的颜色
        width: 35,
        lineHeight: 35,    // 行高
        borderRadius: 10,
        fontSize: 20,    // 文字字体大小
        backgroundColor: '#999'
        
    },
    splitLine: {
        show: true,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
        interval: '0',    // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        color: ['#ccc'],    
        width: 3, // 分隔线线宽
        type: 'solid', // 坐标轴线线的类型（solid实线类型；dashed虚线类型；dotted点状类型）
    }
  },
  yAxis: {
    type: 'value',
    show: true,
    max: 10,
    axisLabel: {
        show: false
    },
    splitArea: {
        show: true, // 是否显示分隔区域
        interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效.0显示所有
        areaStyle: {
            // color分隔区域颜色。分隔区会按数组中颜色顺序依次循环设置颜色。默认是一个深浅的间隔色
            color: ['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'], 
            opacity: 1, // 图形透明度。支持从0到1的数字，为0时不绘制该图形
        },
    }
  },
  visualMap: {
    show: false,
    dimension: 0,
    pieces: [
      {
        lte: 0,
        color: '#ff0000'
      },
      {
        gt: 0,
        lte: 1,
        color: '#fca906'
      },
      {
        gt: 1,
        lte: 2,
        color: '#00b050'
      },
      {
        gt: 2,
        lte: 3,
        color: '#00b1f2'
      }
    ]
  },
  series: [
    {
      type: 'line',
      lineStyle: {
          color: "#333", //线条颜色
      },
      symbol: 'circle',
      symbolSize: 20,
      data: [5, 7, 2, 8],
      itemStyle: {
        normal: {
            label: {
                show: true, // 是否显示
                position: 'right', // 显示位置
                color: '#333',
                fontSize: 20
            }
        }
    },
    markLine: {
        lineStyle: {
            type: 'solid',
        },
        // symbol: ['none', 'none'],
        label: { show: false },
        data: [
          { 
            xAxis: 0,
            lineStyle: {
                color: '#ff0000'
            }
          },
          {
            xAxis: 1,
            lineStyle: {
               color: '#fca906',
              
            }
          }, 
          {
            xAxis: 2,
            lineStyle: {
               color: '#00b050'
            }
          },  
          {
            xAxis: 3,
            lineStyle: {
               color: '#00b1f2',
               barWidth:260
            }
          }
        ]
      }
    }
  ]
};
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
137

option = {
  backgroundColor: '#173565',
  visualMap: [
    {
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    },
    {
      show: false,
      type: 'continuous',
      seriesIndex: 1,
      dimension: 0,
      min: 0,
      max: 100
    }
  ],
  title: [
    {
      top: '2%',
      left: 'center',
      text: '初中',
      textStyle: {
        color: '#fff',
        fontSize: 15
      }
    },
    {
      top: '55%',
      left: 'center',
      text: '高中',
      textStyle: {
        color: '#fff',
        fontSize:15
      }
    }
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      boundaryGap: false,
      axisLabel: {
        fontSize: 12,
        color: '#fff'
      },
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      },
      data: ['初一一班', '初一一班', '初一一班', '初一一班', '初一一班', '初一一班', '初一一班']
    },
    {
      gridIndex: 1,
      boundaryGap: false,
      axisLabel: {
        fontSize: 12,
        color: '#fff'
      },
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      },
      data: ['初一一班', '初一一班', '初一一班', '初一一班', '初一一班', '初一一班', '初一一班']
    }
  ],
  yAxis: [
    {
      type: 'value',
      boundaryGap: true,
      axisLabel: {
        fontSize: 12,
        color: '#fff'
      },
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      }
    },
    {
      gridIndex: 1,
      type: 'value',
      boundaryGap: true,
      axisLabel: {
        fontSize: 12,
        color: '#fff'
      },
      axisLine: {
        show: true
      },
      splitLine: {
        show: false
      }
    }
  ],
  grid: [
    {
      top: '10%',
      bottom: '55%',
      left: '7%',
      right: '7%'
    },
    {
      top: '60%',
      bottom: '5%',
      left: '7%',
      right: '7%'
    }
  ],
  series: [
    {
      type: 'line',
      smooth: true,
      data: [120, 132, 101, 134, 90, 230, 210],
      symbol: 'circle', //拐点样式
      symbolSize: 4, //拐点大小
      // 折线条的样式
      lineStyle: {
        color: 'rgba(0,0,0,0)'
      },
      // 折线拐点的样式
      itemStyle: {
        normal: { // 静止时：
          color: '#fff',
          borderColor: "#fff",//拐点的边框颜色
          borderWidth: 4
        },
        emphasis: { // 鼠标经过时：
          color: '#fff',
        }
      },
      areaStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: .5,
          x2: 0,
          y2: 1,
          colorStops: [{
              offset: 0, color: '#00EAD1' // 0% 处的颜色
          }, {
              offset: 1, color: '#0055CB' // 100% 处的颜色
          }],
          global: false // 缺省为 false
        }
      }
    },
    {
      type: 'line',
      smooth: true,
      data: [120, 132, 101, 134, 90, 230, 210],
      symbol: 'circle', //拐点样式
      symbolSize: 4, //拐点大小
      // 折线条的样式
      lineStyle: {
        color: 'rgba(0,0,0,0)'
      },
      // 折线拐点的样式
      itemStyle: {
        normal: { // 静止时：
          color: '#fff',
          borderColor: "#fff",//拐点的边框颜色
          borderWidth: 4
        },
        emphasis: { // 鼠标经过时：
          color: '#fff',
        }
      },
      areaStyle: {
        opacity: 1,
        color: new echarts.graphic.LinearGradient(0, .5, 0, 1, [
          {
            offset: 0,
            color: '#FFAB2E'
          },
          {
            offset: 1,
            color: '#33B6FF'
          }
        ])
      },
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
};
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195

在这里插入图片描述

option = {
  backgroundColor: '#131724',
  legend: {
    data: ['高中', '初中'],
    x: 'right',
    y: '0%',
    itemGap: 20,
    orient: 'vertical',
    textStyle: {
      color: '#fff',
      fontSize: 14
    }
  },
  tooltip: {
    trigger: 'item',
    formatter: '[{a}] {b}
考试数量：{c}',
    position: 'top',
    backgroundColor: 'rgba(0,0,0,.3)',
    borderColor: 'rgba(255,255,255,.2)',
    color: '#fff',
    extraCssText: 'box-shadow: 0 0 0 rgba(255,255,255, .5); color: #fff;',
    zIndex: 400
  },
  xAxis: [
    {
      boundaryGap: true,
      axisLabel: {
        fontSize: 14,
        color: '#4FFFFA',
        interval: 0,
        rotate: 0,
        padding: [0, 0, 0, -30]
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#2F4276'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: ['高一', '高二', '高三']
    },
    {
      boundaryGap: true,
      axisLabel: {
        fontSize: 14,
        color: '#4FFFFA',
        interval: 0,
        rotate: 0,
        padding: [0, 0, 0, 40]
      },
      position: 'bottom',
      axisLine: {
        show: true,
        lineStyle: {
          color: '#2F4276'
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      data: ['初一', '初二', '初三']
    }
  ],
  yAxis: [
    {
      type: 'value',
      max: 10,
      name: '（班/数量）',
      // 居中
      nameLocation: 'end',
      // 坐标轴名称与轴线之间的距离。
      nameGap: 13,
      nameTextStyle: {
        color: '#2CFFF9',
        fontSize: 10,
        padding: [0, 0, 0, -30]
      },
      nameRotate: 360,
      axisLabel: {
        fontSize: 14,
        color: '#4FFFFA'
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: '#2F4276'
        }
      },
      splitLine: {
        show: false
      }
    }
  ],
  grid: {
    top: '10%',
    bottom: '10%',
    left: '7%',
    right: '7%'
  },
  series: [
    {
      name: '初中',
      type: 'line',
      smooth: true,
      // 折线条的样式
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0.5,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#84A7FF' // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: '#0368FF' // 50% 处的颜色
            },
            {
              offset: 1,
              color: '#5783F6' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      },
      // 折线拐点的样式
      itemStyle: {
        normal: {
          // 静止时：
          color: 'rgba(0,0,0,0)'
        }
      },
      emphasis: {
        focus: 'series'
      },
      data: [
        { name: '初一', value: 5 },
        { name: '初二', value: 8 },
        { name: '初三', value: 3 }
      ]
    },
    {
      name: '高中',
      type: 'line',
      smooth: true,
      // 折线条的样式
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0.5,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: '#FF31C5' // 0% 处的颜色
            },
            {
              offset: 0.5,
              color: '#9003FF' // 50% 处的颜色
            },
            {
              offset: 1,
              color: '#FF849A' // 100% 处的颜色
            }
          ],
          global: false // 缺省为 false
        }
      },
      // 折线拐点的样式
      itemStyle: {
        normal: {
          // 静止时：
          color: 'rgba(0,0,0,0)'
        }
      },
      data: [
        { name: '高一', value: 1 },
        { name: '高二', value: 2 },
        { name: '高三', value: 9 }
      ]
    }
  ]
};
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198

let yData = [20, 80, 60, 77];
let xTime = ['2023.3.28', '2023.4.28', '2023.5.28', '2023.6.15'];
option = {
  backgroundColor: '#000',
  tooltip: {
    trigger: 'axis',
    formatter: function (param) {
      let resultTooltip =
          "
" +
          "
" + param[0].name + "
" +
          "
" +
          "" +
          " " + param[0].seriesName + "：" +
          "" + param[0].value + "" +
          "
";
      return resultTooltip
    },
    position: 'right',
    padding: [5, 8],
    textStyle: {
      color: '#eee',
      fontSize: 13
    },
    axisPointer: {
      type: 'line',
      label: { show: true, backgroundColor: 'transparent' },
      lineStyle: {
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            { offset: 0, color: 'rgba(100, 101, 171, 0)' },
            { offset: 0.5, color: 'rgba(100, 101, 171, 0.2)' },
            { offset: 0.999999, color: 'rgba(100, 101, 171, 1)' },
            { offset: 1, color: 'rgba(100, 101, 171, 1)' }
          ],
          global: false
        },
        type: 'solid',
        width: 40
      }
    },
    backgroundColor: 'rgba(13,5,30,.6)',
    extraCssText: 'z-index:1' // 层级
  },
  legend: {
    show: false,
    data: ['得分'],
    icon: 'circle',
    x: 'center',
    y: '0',
    itemGap: 20,
    // orient: 'vertical', // 纵向分布
    textStyle: {
      color: '#fff',
      fontSize: 12
    }
  },
  grid: {
    top: '15%',
    left: '3%',
    right: '6%',
    bottom: '2%',
    containLabel: true
  },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    name: '时间',
    nameLocation: 'center',
    nameTextStyle: {
      color: '#8F8F8F',
      fontSize: 12,
      padding: [0, 0, 0, 1505]
    },
    data: xTime,
    axisLabel: {
      fontSize: 10,
      color: '#8F8F8F'
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(62, 100, 151, 0.29)'
      }
    },
    axisTick: {
      show: false
    }
  },
  yAxis: {
    type: 'value',
    name: '百分制',
    nameLocation: 'end',
    nameGap: 10,
    max: 100,
    nameTextStyle: {
      color: '#8F8F8F',
      fontSize: 12,
      padding: [0, 0, 5, -45]
    },
    boundaryGap: true,
    interval: 10, //间隔
    axisLabel: {
      fontSize: 12,
      color: '#8F8F8F'
    },
    axisLine: {
      show: false
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: 'rgba(62, 100, 151, 0.29)'
      }
    },
    axisTick: {
      show: false
    }
  },
  series: [
    {
      name: '得分',
      data: yData,
      type: 'line',
      symbolSize: 0.2, // 原点大小
      smooth: true,
      zlevel: 1, // 层级
      label: {
        normal: {
          position: 'right',
          show: true,
          color: '#eee',
          fontSize: 13,
          formatter: function (params) {
            return params.data + '分';
          }
        }
      },
      // 折线拐点的样式
      itemStyle: {
        normal: {
          // 静止时：
          color: '#0088FF',
          borderColor: '#0088FF', //拐点的边框颜色
          borderWidth: 2
        },
        emphasis: {
          // 鼠标经过时：
          color: '#4CF8C5'
        }
      },
      areaStyle: {
        color: new echarts.graphic.LinearGradient(0, 0.1, 0, 1, [
          {
            offset: 0,
            color: 'rgba(0, 199, 242, .9)'
          },
          {
            offset: 1,
            color: 'rgba(0, 199, 242, .2)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      }
    }
  ]
};
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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176