本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中绘制折线图，只需要将series中的type设置为"line"即可。
为了显示数据信息，可以使用label参数显示标签，并可根据需要设置文字样式。
代码如下：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "终端分布"
5 },
6
7 tooltip: {},
8
9 // 图例
10 legend: {
11 data: ["Android"]
12 },
13
14
15 // x轴
16 xAxis: {
17 type: "category",
18 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
19 },
20
21 // y轴
22 yAxis: {
23 type: "value",
24 },
25
26
27 // 数据系列
28 series: [{
29 name: "Android",
30 type: "line",
31 label:{
32 show:true, // 显示标签
33 fontWeight:"bold", // 文字字体的粗细
34 },
35 data: [150, 230, 224, 218, 135, 147, 260],
36 }]
37 };
可视化结果如下图所示：
smooth参数：
smooth参数用于设置是否平滑曲线显示。
boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。 1 // 数据系列
2 series: [{
3 name: "Android",
4 type: "line",
5 smooth:true, // 是否平滑曲线显示
6 label:{
7 show:true, // 显示标签
8 fontWeight:"bold", // 文字字体的粗细
9 },
10 data: [150, 230, 224, 218, 135, 147, 260],
11 }]
可视化结果如下图所示：
symbol设置：
可以使用symbol参数调整标记的图形。
ECharts 提供的标记类型包括'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，也可以通过 'image://url' 将标记设置为图片，其中 URL 为图片的链接，或者 dataURI。
可以使用symbolSize参数来设置标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，例如 [20, 10] 表示标记宽为20，高为10。
value 为 data 中的数据值。第二个参数params 是其它的数据项参数。：(value: Array|number, params: Object) => number|Array
代码如下：
1 // 数据系列
2 series: [{
3 name: "Android",
4 type: "line",
5 smooth: true, // 是否平滑曲线显示
6 symbol: "diamond", // 标记的图形
7 symbolSize: (value, params) => {
8 params.symbolSize = parseInt(0.1 * value)
9 return params.symbolSize
10 }, // 使用回调函数，将标记的大小设置为数值乘以0.1
11 label: {
12 show: true, // 显示标签
13 fontWeight: "bold", // 文字字体的粗细
14 },
15 data: [150, 230, 224, 218, 135, 147, 260],
16 }]
17 };
可视化结果如下图所示：
图表标注、标线、标域：
markPoint用于设置图表标注。markLine用于设置图表标线。markArea用于设置图表标域。
三者均使用data参数来设置数据数组，其中：
-
标注的数据数组，每个数组项是一个对象。
-
标线的数据数组，每个数组项可以是一个两个值的数组，分别表示线的起点和终点，每一项是一个对象。
-
标域的数据数组，每个数组项是一个两个项的数组，分别表示标域左上角和右下角的位置。
-
通过 x, y 属性指定相对容器的屏幕坐标，单位像素，支持百分比。用 coord 属性指定数据在相应坐标系上的坐标位置，单个维度支持设置 ‘min’, ‘max’, ‘average’。 -
直接用 type 属性标注系列中的最大值，最小值。这时候可以使用 valueIndex 或者 valueDim 指定是在哪个维度上的最大值、最小值、平均值。 -
如果是笛卡尔坐标系的话，也可以通过只指定 xAxis 或者 yAxis 来实现 X 轴或者 Y 轴为某值的标线，见示例 scatter-weight -
当多个属性同时存在时，优先级按上述的顺序。
代码如下：
1 // 数据系列
2 series: [{
3 name: "Android",
4 type: "line",
5 smooth: true, // 是否平滑曲线显示
6 symbol: "diamond", // 标记的图形
7 symbolSize: (value, params) => {
8 params.symbolSize = parseInt(0.1 * value)
9 return params.symbolSize
10 }, // 使用回调函数，将标记的大小设置为数值乘以0.1
11 // label: {
12 // show: true, // 显示标签
13 // fontWeight: "bold", // 文字字体的粗细
14 // },
15 data: [150, 230, 224, 218, 135, 147, 260],
16 // 图表标注
17 markPoint: {
18 data: [{
19 name: "最大值",
20 type: "max",
21 itemStyle: { color: "red" }
22 },{
23 name: "某个坐标",
24 yAxis: 100,
25 x: '50%',
26 symbolSize:30,
27 itemStyle: { color: "red" }
28 }]
29 },
30 // 图表标线
31 markLine:{
32 data:[{
33 name:"平均线",
34 type:"average",
35 lineStyle:{
36 color:"red",
37 type:"dotted",
38 },
39 },{
40 name:"X 轴值为 Fri 的竖直线",
41 xAxis:"Fri",
42 lineStyle:{
43 color:"red",
44 type:"dotted",
45 },
46 }]
47 },
48 // 图表标域
49 markArea:{
50 data:[
51 [{
52 name:"最小值到最大值",
53 type:"min",
54 },{
55 type:"max",
56 }]],
57 },
58 }]
可视化结果如下图所示：
面积图+堆积面积图：
首先创建两个数据系列，并绘制普通折线图，代码如下：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "终端分布"
5 },
6
7 tooltip: {},
8
9 // 图例
10 legend: {
11 data: ["Android", "Iphone"]
12 },
13
14
15 // x轴
16 xAxis: {
17 type: "category",
18 data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
19 },
20
21 // y轴
22 yAxis: {
23 type: "value",
24 },
25
26
27 // 数据系列
28 series: [{
29 name: "Android",
30 type: "line",
31 label: {
32 show: true, // 显示标签
33 fontWeight: "bold", // 文字字体的粗细
34 },
35 data: [150, 230, 224, 218, 135, 147, 260],
36 },
37 {
38 name: "Iphone",
39 type: "line",
40 label: {
41 show: true, // 显示标签
42 fontWeight: "bold", // 文字字体的粗细
43 },
44 data: [100, 200, 250, 200, 180, 190, 220],
45 }
46 ]
47 };
可视化结果如下图所示：
-
通过 areaStyle参数可以生成面积图：
1 // 数据系列
2 series: [{
3 name: "Android",
4 type: "line",
5 label: {
6 show: true, // 显示标签
7 fontWeight: "bold", // 文字字体的粗细
8 },
9 // 区域填充样式。设置后显示成区域面积图。
10 areaStyle:{
11 opacity:0.6, // 透明度
12 },
13 data: [150, 230, 224, 218, 135, 147, 260],
14 },
15 {
16 name: "Iphone",
17 type: "line",
18 label: {
19 show: true, // 显示标签
20 fontWeight: "bold", // 文字字体的粗细
21 },
22 // // 区域填充样式。设置后显示成区域面积图。
23 areaStyle:{
24 opacity:0.6, // 透明度
25 },
26 data: [100, 200, 250, 200, 180, 190, 220],
27 }
28 ]
可视化结果如下图所示：
-
通过 stack参数可以进行数据堆叠，生成堆积面积图：
要生成堆积面积图首先要确保每个数据分类的数据相加起来是有意义的。
1 // 数据系列
2 series: [{
3 name: "Android",
4 type: "line",
5 label: {
6 show: true, // 显示标签
7 fontWeight: "bold", // 文字字体的粗细
8 },
9 // 区域填充样式。设置后显示成区域面积图。
10 areaStyle:{
11 opacity:0.6, // 透明度
12 },
13 stack:"Total",
14 data: [150, 230, 224, 218, 135, 147, 260],
15 },
16 {
17 name: "Iphone",
18 type: "line",
19 label: {
20 show: true, // 显示标签
21 fontWeight: "bold", // 文字字体的粗细
22 },
23 // 区域填充样式。设置后显示成区域面积图。
24 areaStyle:{
25 opacity:0.6, // 透明度
26 },
27 stack:"Total",
28 data: [100, 200, 250, 200, 180, 190, 220],
29 }
30 ]
可视化结果如下图所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
