Echarts折线图绘制

本文基于使用JavaScript对Echarts绘制图表进行汇总，方便使用

1.前言：

在自己的website上需要使用到图表类绘制时，经常用到Echarts绘制一些可交互式的图表。鉴于每次写代码都要重新修改或者添加配置，文章将总结出大部分常用图表的基本配置和相应代码。

2.Line折线图绘制

2.1基础折线图

我们先来看看效果，如下图所示：


接下来我会给出一些配置的简单说明，可以根据需要自行修改。

全局配置

配置项 类型 描述 可选值 / 默认值
title Object 图表标题配置 -
tooltip Object 提示框配置 -
legend Object 图例配置 -
xAxis Object X 轴配置 -
yAxis Object Y 轴配置 -
series Array 数据系列配置 -

title 配置

配置项 类型 描述 可选值 / 默认值
text String 标题文本 必填，默认为空
left String 标题水平位置 left / center / right，默认 auto
bottom String 标题垂直位置（注释掉） 单位支持像素、百分比，默认不设置

tooltip 配置

配置项 类型 描述 可选值 / 默认值
trigger String 触发类型 axis / item，默认 item（item是指当鼠标悬浮在某个具体的图表数据点时，显示提示框。axis是指坐标轴触发。鼠标悬浮在坐标轴上的任意点时，会显示与该轴相关的所有数据的提示框。）

legend 配置

配置项 类型 描述 可选值 / 默认值
data Array 图例项的名称 必填，默认为空
top String 图例的垂直位置 单位支持像素、百分比，默认 auto

xAxis / yAxis 配置

配置项 类型 描述 可选值 / 默认值
type String 坐标轴类型 value / category / time / log
data Array 类目轴的类目数据 仅对 category 轴有效
name String 坐标轴名称 默认为空
axisLine Object 是否显示坐标轴轴线 { show: true / false }，默认显示
axisTick Object 是否显示坐标轴刻度 { show: true / false }，默认显示
splitLine Object 是否显示分隔线 { show: true / false }，默认显示

series 配置

配置项 类型 描述 可选值 / 默认值
name String 系列名称 必填
data Array 数据数组 必填
type String 系列类型 line / bar 等，默认为 line
symbol String 标记类型 circle / rect / triangle 等，默认 circle
symbolSize Number 标记大小 默认 4
showSymbol Boolean 是否显示标记 默认 true
coordinateSystem String 坐标系类型 cartesian2d / polar 等，默认 cartesian2d
stack String 数据堆叠 同名堆叠
smooth Boolean 是否平滑折线 默认 false
connectNulls Boolean 是否连接空数据点 默认 false
step Boolean 是否使用阶梯线 默认 false
配置项 类型 描述 可选值 / 默认值
color String 自定义线条颜色 默认使用调色盘

series配置中出现的stack，smooth，step我们单独绘制出来看看效果是怎么样的，注意，stack是数据堆叠，只有相同stack值的数据才会堆叠。

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
<script>
    // 基于准备好的 DOM，初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '一天的温度变化',
        left: 'center',
        // bottom: "10%"
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['最高温度', '最低温度', '平均温度'],
        top: '10%',
      },
      xAxis: {
        type: 'category',
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
        name: '时间',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false }
      },
      yAxis: {
        type: 'value',
        name: '温度 (°C)',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false },
      },
      series: [
        {
          name: '最高温度',
          data: [15, 18, 21, 26, 24, 20, 16],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
        },
        {
          name: '最低温度',
          data: [5, 6, 8, 12, 10, 8, 6],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
        },
        {
          name: '平均温度',
          data: [10, 12, 15, 19, 17, 14, 11],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>

2.2阶梯折线图

阶梯图的示例如下

阶梯图JavaScript代码片段，复制粘贴即可修改

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
<script>
    // 基于准备好的 DOM，初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main1'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '一天的温度变化阶梯图',
        left: 'center',
        // bottom: "10%"
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['最高温度', '最低温度', '平均温度'],
        top: '10%',
      },
      xAxis: {
        type: 'category',
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
        name: '时间',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false }
      },
      yAxis: {
        type: 'value',
        name: '温度 (°C)',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false },
      },
      series: [
        {
          name: '最高温度',
          data: [15, 18, 21, 26, 24, 20, 16],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: true,
          // smooth: true,
          // color: "000000"
        },
        {
          name: '最低温度',
          data: [5, 6, 8, 12, 10, 8, 6],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: true,
          // smooth: true,
          // color: "000000"
        },
        {
          name: '平均温度',
          data: [10, 12, 15, 19, 17, 14, 11],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: true,
          // smooth: true,
          // color: "000000"
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>

2.3平滑折线图

同样的，以下是平滑曲线示例

这是加入平滑配置后的JavaScript片段

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
<script>
    // 基于准备好的 DOM，初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main2'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '一天的温度变化平滑折线图',
        left: 'center',
        // bottom: "10%"
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['最高温度', '最低温度', '平均温度'],
        top: '10%',
      },
      xAxis: {
        type: 'category',
        data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
        name: '时间',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false }
      },
      yAxis: {
        type: 'value',
        name: '温度 (°C)',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false },
      },
      series: [
        {
          name: '最高温度',
          data: [15, 18, 21, 26, 24, 20, 16],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: false,
          smooth: true,
          // color: "000000"
        },
        {
          name: '最低温度',
          data: [5, 6, 8, 12, 10, 8, 6],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: false,
          smooth: true,
          // color: "000000"
        },
        {
          name: '平均温度',
          data: [10, 12, 15, 19, 17, 14, 11],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: false,
          smooth: true,
          // color: "000000"
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>

2.4堆叠折线图

以下是堆叠图示例JavaScript代码片段

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
<script>
    // 基于准备好的 DOM，初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main0'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '堆叠图示例',
        left: 'center',
        // bottom: "10%"
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
        top: '10%',
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        name: '时间',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false }
      },
      yAxis: {
        type: 'value',
        name: '温度 (°C)',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false },
      },
      series: [
        {
          name: 'Email',
          data: [120, 132, 101, 134, 90, 230, 210],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
        },
        {
          name: 'Union Ads',
          data: [220, 182, 191, 234, 290, 330, 310],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
        },
        {
          name: 'Video Ads',
          data: [150, 232, 201, 154, 190, 330, 410],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
        },
        {
          name: 'Direct',
          data: [320, 332, 301, 334, 390, 330, 320],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
        },
        {
          name: 'Search Engine',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>

2.5基本面积图

如果希望折线下方被颜色填充，可以使用配置areaStyle区域填充样式。设置后显示成区域面积图。注意在xAxis中添加boundaryGap: false,目的是铺满边界

以下是基本面积图示例JavaScript代码片段，其中origin表示图形的起始区域，默认情况下，图形会从坐标轴轴线到数据间进行填充。如果需要填充的区域是坐标轴最大值到数据间，或者坐标轴最小值到数据间，或者某个数值到数据间则可以通过这个配置项进行设置。
可选值包括：

auto 填充坐标轴轴线到数据间的区域（默认值）


start 填充坐标轴底部（非 inverse 情况是最小值）到数据间的区域


end 填充坐标轴顶部（非 inverse 情况是最大值）到数据间的区域


number 填充指定数值到数据间的区域（从 v5.3.2 开始支持）

如果添加color配置，就会取消原有调色盘颜色，改为自定义颜色，但建议搭配series里的color一起设置。其实默认的就挺好看。

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
<script>
    // 基于准备好的 DOM，初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main4'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '基本面积图示例',
        left: 'center',
        // bottom: "10%"
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads'],
        top: '10%',
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        name: '时间',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false }
      },
      yAxis: {
        type: 'value',
        name: '温度 (°C)',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false },
      },
      series: [
        {
          name: 'Email',
          data: [520, 432, 401, 634, 590, 430, 610],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          // stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
          areaStyle: {
            // color: "",
            origin: "auto",
            opacity: 1
          },
        },
        {
          name: 'Union Ads',
          data: [220, 182, 191, 234, 290, 330, 310],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          // stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
          areaStyle: {
            // color: "",
            origin: "auto",
            opacity: 1
          },
        },
      ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>

2.6堆叠面积图

当你学会了使用基本堆叠图后，堆叠面积图也不在话下。这里新加入了一个配置emphasis中的focus: ‘series’，这会在鼠标移入高亮图形时，选择是否淡出其它数据的图形已达到聚焦的效果。如果不需要这个效果，可以把series设置为none或者self，或者直接删掉也可以。

以下是堆叠图示例JavaScript代码片段

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
<script>
    // 基于准备好的 DOM，初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main0'));
    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '堆叠图示例',
        left: 'center',
        // bottom: "10%"
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine'],
        top: '10%',
      },
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        name: '时间',
        axisLine: { show: true },
        axisTick: { show: true },
        boundaryGap: false,
        splitLine: { show: false }
      },
      yAxis: {
        type: 'value',
        name: '温度 (°C)',
        axisLine: { show: true },
        axisTick: { show: true },
        splitLine: { show: false },
      },
      series: [
        {
          name: 'Email',
          data: [120, 132, 101, 134, 90, 230, 210],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
        },
        {
          name: 'Union Ads',
          data: [220, 182, 191, 234, 290, 330, 310],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
        },
        {
          name: 'Video Ads',
          data: [150, 232, 201, 154, 190, 330, 410],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
        },
        {
          name: 'Direct',
          data: [320, 332, 301, 334, 390, 330, 320],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
        },
        {
          name: 'Search Engine',
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          // symbol: 'circle',
          symbolSize: 8,
          showSymbol: true,
          coordinateSystem: 'cartesian2d',
          stack: 'Total',
          connectNulls: false,
          step: false,
          // smooth: true,
          // color: "000000"
          areaStyle: {},
          emphasis: {
            focus: 'series'
          },
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
</script>

2.7渐变堆叠面积图

不多说，直接看效果

思路就是自定义喜欢的颜色，然后设置color中的new echarts.graphic.LinearGradient就可以了。
以下是JavaScript源码

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
<script>
    // 基于准备好的 DOM，初始化 echarts 实例
    var myChart = echarts.init(document.getElementById('main0'));
    // 指定图表的配置项和数据
    var option = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: '渐变堆叠面积图',
    left: 'center',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
    top: '10%'
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(128, 255, 165)'
          },
          {
            offset: 1,
            color: 'rgb(1, 191, 236)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: 'Line 2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(0, 221, 255)'
          },
          {
            offset: 1,
            color: 'rgb(77, 119, 255)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: 'Line 3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(55, 162, 255)'
          },
          {
            offset: 1,
            color: 'rgb(116, 21, 219)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: 'Line 4',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)'
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: 'Line 5',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)'
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)'
          }
        ])
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
};

3 最后

折线图内容较多，下期继续更新内容，拜拜