ECharts 简介

ECharts 是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(Chrome,Firefox,Safari,IE8/9/10/11 等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。它提供了常规的折线图、柱状图、散点图、饼图、K 线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

Hexo 中的 ECharts

ECharts 的 Hexo 插件目前有三个版本,分别为:

本文使用的是 Hexo 的 ECharts 插件 hexo-tag-echarts,只需要在 Hexo 文档中引入一次 ECharts.js 就可以渲染整个页面的图表了。插件的安装和使用非常的简单,只需要进入博客目录,然后打开命令行,用 npm 安装一下:

1
npm install hexo-tag-echarts --save

之后在文章内使用 echartstag 就可以了

1
2
3
{% echarts 400 '90%' %}
\\TODO echarts option goes here
{% endecharts %}

其中 echarts 是标签名,endecharts 是结束标签,不需要更改,400 是图表容器的高度,默认是按正常比例缩放的,'90%' 是图表容器的相对宽度,默认是 100%。在标签之间的部分,需要自己填充的图表数据和属性,更多自定义属性可以查看 ECharts 配置项文档

图表示例

现在你已经基本学会了在 Hexo 中插入 ECharts 图表了,下面再展示一些基本的图表,更多炫酷的图表可以自己去尝试一下。

折线图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% echarts 400 '90%' %}
{
tooltip: {
trigger: 'axis'
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};
{% endecharts %}

显示效果如下所示:

柱状图、条形图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{% echarts 400 '90%' %}
{
tooltip: {},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
{% endecharts %}

显示效果如下所示:

环形图、饼状图

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
{% echarts 400 '90%' %}
{
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
legend: {
orient: 'vertical',
left: 10,
data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
},
series: [
{
name: '访问来源',
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: '30',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
]
}
]
};
{% endecharts %}

显示效果如下所示:

散点图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% echarts 400 '90%' %}
{
tooltip: {},
xAxis: {},
yAxis: {},
series: [{
symbolSize: 20,
data: [
[10.0, 8.04],
[8.0, 6.95],
[13.0, 7.58],
[9.0, 8.81],
[11.0, 8.33],
[14.0, 9.96],
[6.0, 7.24],
[4.0, 4.26],
[12.0, 10.84],
[7.0, 4.82],
[5.0, 5.68]
],
type: 'scatter'
}]
};
{% endecharts %}

显示效果如下所示:

雷达图

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
{% echarts 400 '90%' %}
{
tooltip: {},
legend: {
data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
},
radar: {
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: '销售(sales)', max: 6500},
{ name: '管理(Administration)', max: 16000},
{ name: '信息技术(Information Techology)', max: 30000},
{ name: '客服(Customer Support)', max: 38000},
{ name: '研发(Development)', max: 52000},
{ name: '市场(Marketing)', max: 25000}
]
},
series: [{
name: '预算 vs 开销(Budget vs spending)',
type: 'radar',
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配(Allocated Budget)'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销(Actual Spending)'
}
]
}]
};
{% endecharts %}

显示效果如下所示:

关系图

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
{% echarts 400 '90%' %}
{
tooltip: {},
series: [
{
type: 'graph',
layout: 'none',
symbolSize: 50,
label: {
show: true
},
edgeSymbol: ['circle', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
fontSize: 20
},
data: [{
name: '节点1',
x: 300,
y: 300
}, {
name: '节点2',
x: 800,
y: 300
}, {
name: '节点3',
x: 550,
y: 100
}, {
name: '节点4',
x: 550,
y: 500
}],
links: [{
source: 0,
target: 1,
symbolSize: [5, 20],
label: {
show: true
},
lineStyle: {
width: 5,
curveness: 0.2
}
}, {
source: '节点2',
target: '节点1',
label: {
show: true
},
lineStyle: {
curveness: 0.2
}
}, {
source: '节点1',
target: '节点3'
}, {
source: '节点2',
target: '节点3'
}, {
source: '节点2',
target: '节点4'
}, {
source: '节点1',
target: '节点4'
}],
lineStyle: {
opacity: 0.9,
width: 2,
curveness: 0
}
}
]
};
{% endecharts %}

显示效果如下所示:

矩形树图

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
{% echarts 400 '90%' %}
{
tooltip: {},
series: [{
type: 'treemap',
data: [{
name: 'nodeA', // First tree
value: 10,
children: [{
name: 'nodeAa', // First leaf of first tree
value: 4
}, {
name: 'nodeAb', // Second leaf of first tree
value: 6
}]
}, {
name: 'nodeB', // Second tree
value: 20,
children: [{
name: 'nodeBa', // Son of first tree
value: 20,
children: [{
name: 'nodeBa1', // Granson of first tree
value: 20
}]
}]
}]
}]
};
{% endecharts %}

显示效果如下所示:

旭日图

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
{% echarts 400 '90%' %}
{
tooltip: {},
series: {
type: 'sunburst',
data: [{
name: 'Grandpa',
children: [{
name: 'Uncle Leo',
value: 15,
children: [{
name: 'Cousin Jack',
value: 2
}, {
name: 'Cousin Mary',
value: 5,
children: [{
name: 'Jackson',
value: 2
}]
}, {
name: 'Cousin Ben',
value: 4
}]
}, {
name: 'Father',
value: 10,
children: [{
name: 'Me',
value: 5
}, {
name: 'Brother Peter',
value: 1
}]
}]
}, {
name: 'Nancy',
children: [{
name: 'Uncle Nike',
children: [{
name: 'Cousin Betty',
value: 1
}, {
name: 'Cousin Jenny',
value: 2
}]
}]
}],
radius: [0, '90%'],
label: {
rotate: 'radial'
}
}
};
{% endecharts %}

显示效果如下所示:

平行坐标系

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
{% echarts 400 '90%' %}
{
parallelAxis: [
{dim: 0, name: 'Price'},
{dim: 1, name: 'Net Weight'},
{dim: 2, name: 'Amount'},
{
dim: 3,
name: 'Score',
type: 'category',
data: ['Excellent', 'Good', 'OK', 'Bad']
}
],
series: {
type: 'parallel',
lineStyle: {
width: 4
},
data: [
[12.99, 100, 82, 'Good'],
[9.99, 80, 77, 'OK'],
[20, 120, 60, 'Excellent']
]
}
};
{% endecharts %}

显示效果如下所示:

桑基图

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
{% echarts 400 '90%'}
{
tooltip: {},
series: {
type: 'sankey',
layout: 'none',
focusNodeAdjacency: 'allEdges',
data: [{
name: 'a'
}, {
name: 'b'
}, {
name: 'a1'
}, {
name: 'a2'
}, {
name: 'b1'
}, {
name: 'c'
}],
links: [{
source: 'a',
target: 'a1',
value: 5
}, {
source: 'a',
target: 'a2',
value: 3
}, {
source: 'b',
target: 'b1',
value: 8
}, {
source: 'a',
target: 'b1',
value: 3
}, {
source: 'b1',
target: 'a1',
value: 1
}, {
source: 'b1',
target: 'c',
value: 2
}]
}
};
{% endecharts %}

显示效果如下所示:

漏斗图

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
{% echarts 400 '90%'}
{
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
legend: {
data: ['展现','点击','访问','咨询','订单']
},
series: [
{
name:'漏斗图',
type:'funnel',
left: '10%',
top: 60,
//x2: 80,
bottom: 60,
width: '80%',
// height: {totalHeight} - y - y2,
min: 0,
max: 100,
minSize: '0%',
maxSize: '100%',
sort: 'descending',
gap: 2,
label: {
show: true,
position: 'inside'
},
labelLine: {
length: 10,
lineStyle: {
width: 1,
type: 'solid'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
data: [
{value: 60, name: '访问'},
{value: 40, name: '咨询'},
{value: 20, name: '订单'},
{value: 80, name: '点击'},
{value: 100, name: '展现'}
]
}
]
};
{% endecharts %}

显示效果如下所示:

仪表盘

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% echarts 400 '90%'}
{
tooltip: {
formatter: '{a} <br/>{b} : {c}%'
},
series: [
{
name: '业务指标',
type: 'gauge',
detail: {formatter: '{value}%'},
data: [{value: 88.88, name: '完成率'}]
}
]
};
{% endecharts %}

显示效果如下所示:

结语

如果你想了解更多,可以查看 ECharts 的 英文文档 或者 中文文档,更多的实例和属性设置都可以找到,也可以在 ECharts 官网配置好图表属性后再引入到自己的 Hexo 文档中。