图上的按钮可以点击交互🙂

什么是 ECharts 图表

ECharts，一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的 Canvas 类库 ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。

ECharts

在 12 Best Charting Libraries for Web Developers - Christopher Watkins 一文中，博主 Christopher Watkins 向我们介绍了 12 款为网页开发者推荐的绘图库。其中不乏大名鼎鼎的 Google Charts，D3.js 和 HighCharts 这样的富图表库，还有不少其他的特型图表库，它们在展示某些特定的图表时，非常出色。百度开发维护的 ECharts 当然也在其中。

ECharts 作为国产工具，在语言上对中文开发者有着天然的优势，官方文档对每一个细节、参数、配置都有详尽的说明，对于新手非常的友好。另外一个重要的方面，就是 ECharts 的图表颜值很高，默认的主题和配色可以呈现出优雅漂亮的图表。所以，我也一直选择 ECharts 作为我的网页图表绘图工具。

Hexo 中的 ECharts

Hexo 的 ECharts 插件GitHub stars是我根据周旅军的原型插件[1]开发的，已收录于 Hexo 官方插件页。插件的安装和使用非常的简单，只需要进入博客目录，然后安装：

1
npm install hexo-tag-echarts3 --save

之后在文章内使用 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
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 图表如下：

可以看到，在插件的帮助下，在 Hexo 中使用 ECharts 图表是非常方便的，而且得到的图表质量也非常的好。

按照上例不能正确绘制图表的同学，请照下面的指导修改一下 ECharts 的模板文件。
用编辑器打开博客目录下 node_modules/hexo-tag-echarts/echarts-template.html 文件。
作如下修改：

1
2
3
4
5
6
7
8
9
10
11
12
<div id="<%- id %>" style="width: <%- width %>;height: <%- height %>px;margin: 0 auto"></div>
<script type="text/javascript">
	...
</script>

将上面的部分 1、2 行之间添加一行改成下面的代码：

<div id="<%- id %>" style="width: <%- width %>;height: <%- height %>px;margin: 0 auto"></div>
<script src="http://echarts.baidu.com/dist/echarts.common.min.js"></script>
<script type="text/javascript">
	...
</script>

这样便可以在使用 ECharts tag 的时候载入 JavaScript 资源了。

如何用好 ECharts

ECharts 的官方文档详细的介绍了如何在开发中使用 ECharts，如果你是一名前端 JavaScript 开发者，当然可以仔细的阅读并用代码实现。但是，如果你只是希望在博客中插入一些简单的图表，那么从头到尾写一个完整的图表配置，甚至是 ECharts 生成代码是没有必要的，所以我们需要更简单的方法来生成相关的数据。百度·图说是 ECharts 团队开发的另一款非常方便的工具，提供 UI 界面给你快速的绘制和定义图表，然后导出为代码、图片以及其他格式。

打开百度图说，点击开始创建图表，我们可以看到有非常多的选择：

创建图表

我们随便创建某种类型的图表，然后便可以一边修改数据、调整参数、增加功能和工具，一边实时的看到图表效果，非常的直观：

图表调整

然后我们可以通过点击显示代码得到 ECharts 的配置参数：

配置参数

把这段配置参数拷贝复制到我们的博客里面，直接粘贴到 ECharts tag 里面，就可以了：

Tips: 右上角的区域缩放工具可以缩放图中的局部区域，试试看吧。

怎么样，是不是非常的方便。

  1. 1.周旅军的 ECharts 插件已不再维护，我的几个 pull request 都没有响应，所以才根据它的原型，重做了这个新的插件。 ↩