Hexo配置Echarts图表
背景
由于博客中打算添加一些数据相关的图表，如果每次做都是通过截图的方式，着实不便，恰逢近期有闻数据显示平台：Echarts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上。碰巧hexo也有相关的插件已封装好，极其方便，故在此处做下记录。通过此文方式创建，则只会在有echarts图表数据的文章中加载对应的echarts的js文件，在其它文章中不会加载，这样的话会提高其它页面的加载速度。
全文摘录自：https://kchen.cc/2016/11/05/echarts-in-hexo/，作者为：Kun Chen
配置方式
进入博客对应的目录，安装插件：hexo-tag-echarts3
1
npm install hexo-tag-echarts3 --save
打开要发布的文章，在其中引入如下格式的数据即可：
1
2
3
4
5
6// echarts是标签名，用于标识Echarts图表，无需修改
// 400：标识显示数据的容器所占据的高度
// 85%：标识图表容器的相对宽度
{% echarts 400 '85%' %}
// 此处是要填充的图表数据
{% 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{% echarts 400 '85%' %}
{
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['利润', '支出', '收入']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'category',
axisTick : {show: false},
data : ['周一','周二','周三','周四','周五','周六','周日']
}
],
series : [
{
name:'利润',
type:'bar',
itemStyle : {
normal: {
label: {show: true, position: 'inside'}
}
},
data:[200, 170, 240, 244, 200, 220, 210]
},
{
name:'收入',
type:'bar',
stack: '总量',
itemStyle: {
normal: {
label : {show: true}
}
},
data:[320, 302, 341, 374, 390, 450, 420]
},
{
name:'支出',
type:'bar',
stack: '总量',
itemStyle: {normal: {
label : {show: true, position: 'left'}
}},
data:[-120, -132, -101, -134, -190, -230, -210]
}
]
};
{% endecharts %}上述数据构建的图表如下：
(备注，本人安装已可用，所以未执行改步)若执行第二步却无法正常绘制图表，则需要修改Echarts的模板文件，文件路径：网站目录/node_modules/hexo-tag-echarts3/template.html
1
2
3
4
5
6
7
8
9
10
11
12
13<div id="<%- id %>" style="width: <%- width %>;height: <%- height %>px;margin: 0 auto"></div>
<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js"></script>
<!-- 追加下面一句，引入echarts的js库文件 -->
<script src="http://echarts.baidu.com/dist/echarts.common.min.js"></script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('<%- id %>'));
// 指定图表的配置项和数据
var option = <%= option %>
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>至此，已搭建完毕，可在前台进行查看，却发现当通过前台点击有图表的文章进入内容页时，却无法正常的加载出图表的内容，经检查后发现时butterfly主题的配置文件中开启了pjax，用于提高用户的体验，因此导致了这个bug，在不修改的情况下，只要重新刷新页面即可正常加载出来。
由于不做特别的研究，现下记录有借鉴意义的博文：https://blog.zwying.com/archives/23.html
图表数据可视化编辑
Echarts官方文档：https://echarts.apache.org/zh/tutorial.html
由于现下还不能够直接使用javascript的方式编辑图表数据，所以寻找了替代方案：百度的【图说】，提供UI界面以快速的绘制和定义图表，然后导出为代码、图片以及其他格式。
图说网址：https://tushuo.baidu.com/wave
使用方式也特别的简单：【创建图表】–>【数据编辑】/【参数调整】–>【显示代码】–>拷贝代码到markdown文件
拓展
由于很多时候可能还需要进行动态数据的加载，所以也有进行查询，现下记录可借鉴的博文：https://www.cnblogs.com/lvxisha/p/9728194.html
