Echart is an amazing D3-based visualization plug-in for the Hexo. Here is a sample rendered by Echart.
Install Echarts with next theme
My blog use the next theme, which has a different architecture from many other themes. Therefore, the official tutorial of Echarts didn’t work on my blog, which trapped me a lot.
Here is install method on next theme:
- Open the terminal and cd to the path of your blog, then input
npm install hexo-tag-echarts --save - Download Echart.min.js and put it into
yourblog/themes/next/source/js/src. There are 4 different version of Echart.js at here. - CD to
yourblog/themes/next/layoutand open the_layout.swig. Then add this line at the top of the file:1
<script type="text/javascript" src="/js/src/echarts.min.js"></script>
Done. Here is the test table: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'
}
},
legend: {
data:['Profit', 'Cost', 'Revenue']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'value'
}
],
yAxis : [
{
type : 'category',
axisTick : {show: false},
data : ['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
}
],
series : [
{
name:'Profit',
type:'bar',
itemStyle : {
normal: {
label: {show: true, position: 'inside'}
}
},
data:[200, 170, 240, 244, 200, 220, 210]
},
{
name:'Revenue',
type:'bar',
stack: 'Total',
itemStyle: {
normal: {
label : {show: true}
}
},
data:[320, 302, 341, 374, 390, 450, 420]
},
{
name:'Cost',
type:'bar',
stack: 'Total',
itemStyle: {normal: {
label : {show: true, position: 'left'}
}},
data:[-120, -132, -101, -134, -190, -230, -210]
}
]
};
{% endecharts %}