Hexo博客下的Echarts展示

终于成功了!!!

尝试了几个小时,换了不知道多少个攻略,自行搜索网页+人形查看代码报错。。。
特别想唱一曲感动中国!
这里先做一下成果展示,下面一篇文章更新我的debug过程。(开个坑给自己)
芜湖起飞~

第一个例子

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
{% echarts 400 '85%' %}
var data = [];

for (var u = 0; u <= 10; u += 0.2) {
var f = 12*u;
f = Math.round(f*100)/100;
data.push([u, f]);
}

option = {
title: {
text: "某地区蒸发量和降水量"
},
tooltip: {},
xAxis: {
name: 'U/V',
interval: 1
},
yAxis: {
name: 'f/Hz',
interval: 10
},
series: [{
data: data,
type: 'line',
lineStyle: {
width: 4
}
}]
};
{% 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
{% echarts 400 '85%' %}
option = {
title: {
text: "某站点用户访问来源",
subtext: "ECharts示例",
x: "center"
},
tooltip: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: "vertical",
x: "left",
data: ["直接访问", "邮件营销", "联盟广告", "视频广告", "搜索引擎"]
},
toolbox: {
show: true,
feature: {
mark: {
show: true
},
dataView: {
show: true,
readOnly: true
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
calculable: true,
series: [
{
name: "访问来源",
type: "pie",
radius: "55%",
center: ["50%", "60%"],
data: [
{
value: 335,
name: "直接访问"
},
{
value: 310,
name: "邮件营销"
},
{
value: 234,
name: "联盟广告"
},
{
value: 135,
name: "视频广告"
},
{
value: 1548,
name: "搜索引擎"
}
]
}
]
};
{% endecharts %}

每个图的源代码在下方,F12也可以看到,一般位于对应的charts下,以<script type="text/javascript">开头的模块。

另外,想要知道怎么写自己的echarts,可以参考这些网站的模板:
菜鸟教程
百度图说
菜鸟教程的在线编辑器有助于我们在平时使用Hexo简单的标签显示之外,更容易理解渲染后的代码,以便我们检查自己的网站哪里出了bug。
比如下面这个代码,在hexo中,我们只需要提取var option=中,option及其后面的内容,不需要在.md中写var,关于echarts的拆解,以后也会提到。

参考


----本文结束啦感谢您阅读----

欢迎关注我的其它发布渠道