在Hexo中嵌入动态图表Echarts和Google Charts

Posted on In

最近学习了PowerBI和Tableau，但是这两个平台如果没有购买服务就无法在网页上显示出来，更别说嵌入到自己网站中。网页端的动态图表有很多，最近研究了一下Echarts和Google Charts，最终将动态图表搬到了博客中：

当然，这主要是在Hexo上实现的。

安装并修改插件

首先安装Echart标签插件，从而实现Echarts的插入。

1
$ npm install hexo-tag-echarts3 --save

打开hexo-tag-echarts3插件Readme.md文件，可以看到用法：将Echarts的Option写在Tag中间。

1
2
3
{% echarts 400 '85%' %}
\\TODO echarts option goes here
{% endecharts %}

然后可以到Echarts官网实例库，选择相应的图例，点开就可以看到相应的代码了，复制option后面的内容，粘贴在Tag标签内，然后数据修改成自己的，就可以将相应的图表嵌入到网页中了。

但是这样做有一个缺点，官方库中有些图例代码中将数据放在option外，那么就无法正常显示了。因此需要对模块进行修改。

打开模块的template.html文件，全部删除后替换成以下代码：

1
2
<div id="<%- id %>" style="width: <%- width %>;height: <%- height %>px;margin: 0 auto"></div>
<%= option %>

然后打开index.js文件，将return _.template(template)后修改成下面：

1
2
3
4
5
6
return _.template(template)({
    id: args[0] || chart,
    option: options,
    height: args[1] || 400,
    width: args[2] || '85%'
});

这样就修改好了，标签有三个参数，第一个参数是表格ID，第二个参数是DOM容器的高度，第三个参数是DOM容器的宽度。修改后自定义的程度就高多了，可以同时支持Echarts和Google Charts图表的插入。

Echarts图表插入样例

更多图例参考官网实例库

效果：

代码：

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
{% echarts chart2 400 '85%' %}
<script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<script type="text/javascript">
        var myChart = echarts.init(document.getElementById('chart2'));
		var xAxisData = [];
		var data1 = [];
		var data2 = [];
        for (var i = 0; i < 100; i++) {
            xAxisData.push('Object' + i);
            data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
            data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
        }

        option = {
            title: {
                text: ' '
            },
            legend: {
                data: ['bar', 'bar2']
            },
            toolbox: {
                // y: 'bottom',
                feature: {
                    magicType: {
                        type: ['stack', 'tiled']
                    },
                    dataView: {},
                    saveAsImage: {
                        pixelRatio: 2
                    }
                }
            },
            tooltip: {},
            xAxis: {
                data: xAxisData,
                splitLine: {
                    show: false
                }
            },
            yAxis: {
            },
            series: [{
                name: 'bar',
                type: 'bar',
                data: data1,
                animationDelay: function (idx) {
                    return idx * 10;
                }
            }, {
                name: 'bar2',
                type: 'bar',
                data: data2,
                animationDelay: function (idx) {
                    return idx * 10 + 100;
                }
            }],
            animationEasing: 'elasticOut',
            animationDelayUpdate: function (idx) {
                return idx * 5;
            }
        };
        myChart.setOption(option);
</script>
{% endecharts %}

需要注意的是，标签内的第一个参数和表格ID要对应一致。

Google Charts图表插入样例

更多图例参考官网实例库

效果：

代码：

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
{% echarts chart1 400 '85%' %}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', {'packages':['gantt']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Task ID');
      data.addColumn('string', 'Task Name');
      data.addColumn('string', 'Resource');
      data.addColumn('date', 'Start Date');
      data.addColumn('date', 'End Date');
      data.addColumn('number', 'Duration');
      data.addColumn('number', 'Percent Complete');
      data.addColumn('string', 'Dependencies');

      data.addRows([
        ['2014Spring', 'Spring 2014', 'spring',
         new Date(2014, 2, 22), new Date(2014, 5, 20), null, 100, null],
        ['2014Summer', 'Summer 2014', 'summer',
         new Date(2014, 5, 21), new Date(2014, 8, 20), null, 100, null],
        ['2014Autumn', 'Autumn 2014', 'autumn',
         new Date(2014, 8, 21), new Date(2014, 11, 20), null, 100, null],
        ['2014Winter', 'Winter 2014', 'winter',
         new Date(2014, 11, 21), new Date(2015, 2, 21), null, 100, null],
        ['2015Spring', 'Spring 2015', 'spring',
         new Date(2015, 2, 22), new Date(2015, 5, 20), null, 50, null],
        ['2015Summer', 'Summer 2015', 'summer',
         new Date(2015, 5, 21), new Date(2015, 8, 20), null, 0, null],
        ['2015Autumn', 'Autumn 2015', 'autumn',
         new Date(2015, 8, 21), new Date(2015, 11, 20), null, 0, null],
        ['2015Winter', 'Winter 2015', 'winter',
         new Date(2015, 11, 21), new Date(2016, 2, 21), null, 0, null],
        ['Football', 'Football Season', 'sports',
         new Date(2014, 8, 4), new Date(2015, 1, 1), null, 100, null],
        ['Baseball', 'Baseball Season', 'sports',
         new Date(2015, 2, 31), new Date(2015, 9, 20), null, 14, null],
        ['Basketball', 'Basketball Season', 'sports',
         new Date(2014, 9, 28), new Date(2015, 5, 20), null, 86, null],
        ['Hockey', 'Hockey Season', 'sports',
         new Date(2014, 9, 8), new Date(2015, 5, 21), null, 89, null]
      ]);

      var options = {
        height: 400,
        gantt: {
          trackHeight: 30
        }
      };

      var chart = new 										    					  
      google.visualization.Gantt(document.getElementById('chart1'));
      chart.draw(data, options);
    }
</script>
{% endecharts %}