在hexo中使用ECharts

发表于 | Edited on | 分类于

        ECHarts是百度开源的一个数据可视化工具，其使用 JavaScript 提供直观，交互丰富，可高度个性化定制的数据可视化图表。那么在利用hexo搭建的博客上如何使用ECharts呢？Kun Chen 在《在 Hexo 中插入 ECharts 动态图表》中提供了一个ECharts插件，十分方便在hexo中使用ECharts图表。

安装使用

  1. 安装ECharts插件
1
npm install hexo-tag-echarts3 --save
  1. 在文章内使用 ECharts 的 tag 就可以了：
1
2
3
{% echarts 400 '85%' %}
\\TODO option goes here
{% endecharts %}

        其中 echarts 是标签名，不需要更改，400 是图表容器的高度，85% 是图表容器的相对宽度。而在 tag 之间的部分，则利用百度图说生成代码填入即可。

测试

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
{% echarts 400 '80%' %}
{
    title: {
        text: "某地区蒸发量和降水量",
        subtext: "纯属虚构"
    },
    tooltip: {
        trigger: "axis"
    },
    legend: {
        data: ["蒸发量","降水量"]
    },
    xAxis: [
        {
            type: "category",
            data: ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"]
        }
    ],
    yAxis: [
        {
            type: "value"
        }
    ],
    series: [
        {
            name: "蒸发量",
            type: "bar",
            data: [2,4.9,7,23.2,25.6,76.7,135.6,162.2,32.6,20,6.4,3.3]
        },
        {
            name: "降水量",
            type: "bar",
            data: [2.6,5.9,9,26.4,28.7,70.7,175.6,182.2,48.7,18.8,6,2.3]
        }
    ]
}
{% endecharts %}

引用带JS代码的ECharts图表

        有些较为复杂的ECharts图表在option前面还需要引入JS代码，这个时候使用这个插件的时候需要注意，还需要将这段JS代码提前输入进去。

1
2
3
4
5
6
7
<script>
//  JS代码
</script>

{% echarts 400 '85%' %}
//TODO option goes here
{% endecharts %}