本系列文章配套代码获取有以下两种途径：
-
通过百度网盘获取：
链接：https://pan.baidu.com/s/1W26KrZK7RjwgxvulccTA9w?pwd=mnsj提取码：mnsj
-
前往GitHub获取：
https://github.com/returu/Data_Visualization在ECharts中绘制散点（气泡）图，只需要将series中的type设置为"scatter"即可。
以下是一些常用参数：
| 参数 |
描述 |
|
symbol |
设置标记的图形，ECharts 提供的标记类型包括'circle', 'rect','roundRect', 'triangle', 'diamond', 'pin', 'arrow', 'none'，也可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
|
|
symbolSize |
标记的大小，可以设置成诸如 10 这样单一的数字，也可以用数组分开表示宽和高，如果需要每个数据的图形大小不一样，可以设置为如下格式的回调函数。 |
|
emphasis |
高亮的图形和标签样式。 | |
disabled |
是否关闭高亮状态。关闭高亮状态可以在鼠标移到图形上，tooltip 触发，或者图例联动的时候不再触发高亮效果。在图形非常多的时候可以关闭以提升交互流畅性。 |
|
scale |
是否开启高亮后的放大效果。 | |
focus |
在高亮图形时，是否淡出其它数据的图形已达到聚焦的效果。支持如下配置： ‘none’ ：不淡出其它图形，默认使用该配置。 ‘self’ ：只聚焦（不淡出）当前高亮的数据的图形。 ‘series’ ：聚焦当前高亮的数据所在的系列的所有图形。 |
|
blurScope |
在开启focus的时候，可以通过blurScope配置淡出的范围。支持如下配置： ‘coordinateSystem’ ：淡出范围为坐标系，默认使用该配置。 ‘series’ ：淡出范围为系列。 ‘global’ ：淡出范围为全局。 |
|
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "散点（气泡）图"
5 },
6
7 tooltip: { formatter: "{a} : {c}" },
8
9 // 图例
10 legend: {},
11
12 xAxis: {},
13
14 yAxis: {},
15
16
17 // 数据系列
18 series: [{
19 name: "类别1",
20 type: "scatter",
21 symbol: "circle", // 标记的图形,默认为circle
22 symbolSize: function(data) { return data[2] }, //设置标记的大小，通过回调函数按照某个维度的数据设置大小
23 emphasis:{
24 focus:"self", // 高亮的图形和标签样式
25 },
26 data: [
27 [10, 9, 20 ,"名称1"],
28 [8, 6, 30 ,"名称2"],
29 [13, 7, 40 ,"名称3"],
30 [11, 8, 25 ,"名称4"],
31 [14, 7, 24 ,"名称5"],
32 [12, 7, 50 ,"名称6"],
33 [2, 4, 25 ,"名称7"],
34 [1, 3, 20 ,"名称8"],
35 [4, 5, 20 ,"名称9"],
36 [6, 7, 35 ,"名称10"],
37 [12, 6, 36 ,"名称11"],
38 [12, 8, 38 ,"名称12"],
39 [5, 5, 44 ,"名称13"]
40 ]
41 }],
42 };
可视化结果如下图所示：
标签设置参数：
label、labelLine、labelLayout参数主要用于标签的设置。
label参数用于设置图形上的文本标签样式，该参数下一些常用的配置项如下所示：
| 参数 |
描述 |
show |
是否显示标签 |
position |
标签的位置。可以通过内置的语义声明位置，也可以用一个数组表示相对的百分比或者绝对像素值表示标签相对于图形包围盒左上角的位置。 |
formatter |
标签内容格式器，支持字符串模板和回调函数两种形式，字符串模板与回调函数返回的字符串均支持用 n 换行。 |
| 参数 |
描述 |
hideOverlap |
是否隐藏重叠的标签 |
moveOverlap |
在标签重叠的时候是否挪动标签位置以防止重叠。目前支持配置为： – – |
x |
标签的 x 位置。支持绝对的像素值或者'20%'这样的相对值 |
y |
标签的 y 位置。支持绝对的像素值或者'20%'这样的相对值 |
align |
标签水平对齐方式。可以设置'left', 'center', 'right' |
labelLine参数用于配置标签的视觉引导线。
| 参数 |
描述 |
show |
是否显示视觉引导线 |
length2 |
视觉引导项第二段的长度 |
smooth |
是否平滑视觉引导线，默认不平滑，可以设置成 true 平滑显示，也可以设置为 0-1 的值，表示平滑程度 |
lineStyle |
设置视觉引导线的颜色(color)、线宽(width)、线类型(type)等 |
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "散点（气泡）图"
5 },
6
7 tooltip: { formatter: "{a} : {c}" },
8
9 // 图例
10 legend: {},
11
12 xAxis: {},
13
14 yAxis: {},
15
16
17 // 数据系列
18 series: [{
19 name: "类别1",
20 type: "scatter",
21 symbol: "circle", // 标记的图形,默认为circle
22 symbolSize: function(data) { return data[2] }, //设置标记的大小，通过回调函数按照某个维度的数据设置大小
23 emphasis:{
24 focus:"self", // 高亮的图形和标签样式
25 },
26
27 // 图形上的文本标签设置
28 label: {
29 show: true, // 是否显示标签
30 position: 'top', // 标签的位置
31 formatter: function(data) {
32 // console.log(data)
33 return data["data"][3] // 标签内容格式器，支持字符串模板和回调函数两种形式
34 }
35 },
36 // 标签的统一布局配置
37 labelLayout: {
38 y: 40, // 标签的 y 位置。支持绝对的像素值或者'20%'这样的相对值。
39 align: "center", // 标签水平对齐方式。可以设置'left', 'center', 'right'。
40 hideOverlap: true, //是否隐藏重叠的标签
41 moveOverlap: "shiftX", // 在标签重叠的时候是否挪动标签位置以防止重叠
42 },
43 // 标签的视觉引导线配置
44 labelLine: {
45 show: true, // 是否显示视觉引导线
46 length2: 5, // 视觉引导项第二段的长度
47 lineStyle: {
48 color: '#bbb' // 线的颜色
49 }
50 },
51
52 data: [
53 [10, 9, 20 ,"名称1"],
54 [8, 6, 30 ,"名称2"],
55 [13, 7, 40 ,"名称3"],
56 [11, 8, 25 ,"名称4"],
57 [14, 7, 24 ,"名称5"],
58 [12, 7, 50 ,"名称6"],
59 [2, 4, 25 ,"名称7"],
60 [1, 3, 20 ,"名称8"],
61 [4, 5, 20 ,"名称9"],
62 [6, 7, 35 ,"名称10"],
63 [12, 6, 36 ,"名称11"],
64 [12, 8, 38 ,"名称12"],
65 [5, 5, 44 ,"名称13"]
66 ]
67 }],
68 };
可视化结果如下图所示：
effectScatter：
将series中的type设置为"effectScatter"可以设置为带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。
代码如下所示：
1 // 设置图表的参数
2 var option = {
3 title: {
4 text: "散点（气泡）图"
5 },
6
7 tooltip: { formatter: "{a} : {c}" },
8
9 // 图例
10 legend: {},
11
12 xAxis: {},
13
14 yAxis: {},
15
16
17 // 数据系列
18 series: [{
19 name: "类别1",
20 type: "scatter",
21 symbol: "circle", // 标记的图形,默认为circle
22 symbolSize: function(data) { return data[2] }, //设置标记的大小，通过回调函数按照某个维度的数据设置大小
23 emphasis:{
24 focus:"self", // 高亮的图形和标签样式
25 },
26
27 // 图形上的文本标签设置
28 label: {
29 show: true, // 是否显示标签
30 position: 'top', // 标签的位置
31 formatter: function(data) {
32 // console.log(data)
33 return data["data"][3] // 标签内容格式器，支持字符串模板和回调函数两种形式
34 }
35 },
36 // 标签的统一布局配置
37 labelLayout: {
38 y: 40, // 标签的 y 位置。支持绝对的像素值或者'20%'这样的相对值。
39 align: "center", // 标签水平对齐方式。可以设置'left', 'center', 'right'。
40 hideOverlap: true, //是否隐藏重叠的标签
41 moveOverlap: "shiftX", // 在标签重叠的时候是否挪动标签位置以防止重叠
42 },
43 // 标签的视觉引导线配置
44 labelLine: {
45 show: true, // 是否显示视觉引导线
46 length2: 5, // 视觉引导项第二段的长度
47 lineStyle: {
48 color: '#bbb' // 线的颜色
49 }
50 },
51
52 data: [
53 [10, 9, 20 ,"名称1"],
54 [8, 6, 30 ,"名称2"],
55 [13, 7, 40 ,"名称3"],
56 [11, 8, 25 ,"名称4"],
57 [14, 7, 24 ,"名称5"],
58 [12, 7, 50 ,"名称6"],
59 [2, 4, 25 ,"名称7"],
60 [1, 3, 20 ,"名称8"],
61 [4, 5, 20 ,"名称9"],
62 [6, 7, 35 ,"名称10"],
63 [12, 6, 36 ,"名称11"],
64 [12, 8, 38 ,"名称12"],
65 [5, 5, 44 ,"名称13"]
66 ]
67 },{
68 name: "类别2",
69 type: "effectScatter", // 带有涟漪特效动画的散点（气泡）图
70 symbolSize: function(data) { return data[2] }, // 标记的大小
71 data: [
72 [8, 5 ,10],
73 [2, 2 ,15],
74 [10, 4 ,25],
75 [6, 5 ,16],
76 [7, 3 ,18],
77 [5, 3 ,13],
78 [6, 4 ,15],
79 ],
80 }],
81 };
可视化结果如下图所示：
更多参数和配置可以查看官方文档：
1https://echarts.apache.org/zh/option.html
本篇文章来源于微信公众号: 码农设计师
