使用 ECharts3.0 在 Hexo 搭建的博客中建一个足迹👣页面

发表于 分类于 阅读次数： 本文字数： 6.4k 阅读时长 ≈ 6 分钟
默认

前言

最近在一个项目中负责数据展示模块的开发，ECharts 作为百度的一个良心项目可以说在大数据展示方面做的很不错了。这段时间在 ECharts 上也花了不少时间。

恰逢清明假期，作为一个出省求学的学生，回家是不可能回家的。但是写作业也是不可能写作业的，这辈子的假期都不可能写作业的。于是“突发奇想”，何不用 ECharts 做一个记录自己足迹的页面呢？

在线构建足迹图

在创建博客页面之前首先要先用 ECharts 把足迹图做好。足迹图实际上就是在地图上实现点数据的可视化，ECharts 配置项手册上的建议是使用在地图坐标系组件上的散点图。以官方实例：全国主要城市空气质量 为基础作修改很容易就可以构造出一个足迹图。

img

在线编辑修改后的基础足迹图的代码如下：

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
var data = [
     {name: '海门', value: ['time','describe']},
     {name: '鄂尔多斯', value: ['time','describe']},
     {name: '招远', value: ['time','describe']},
     {name: '舟山', value: ['time','describe']},
     {name: '齐齐哈尔', value: ['time','describe']},
     {name: '盐城', value: ['time','describe']},
     {name: '赤峰', value: ['time','describe']},
     {name: '青岛', value: ['time','describe']}
];
var geoCoordMap = {
    '海门':[121.15,31.89],
    '鄂尔多斯':[109.781327,39.608266],
    '招远':[120.38,37.35],
    '舟山':[122.207216,29.985295],
    '齐齐哈尔':[123.97,47.33],
    '盐城':[120.13,33.38],
    '赤峰':[118.87,42.28],
    '青岛':[120.33,36.07]
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};

option = {
    backgroundColor: '#404a59',
    title: {
    },
    tooltip: {
        trigger: 'item',
        padding: 10,
        backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        formatter: function (params) {
            name = params.name
            time = params.value[2]
            describe = params.value[3]
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + name
                + '</div>'
                + time
                + '<br>'
                + describe;
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }
    },
    series : [
        {
            name: '足迹',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};

myChart.setOption(option);

演示图如下：

img

在 Hexo 博客上创建[足迹]页面

不同的主题添加新页面的方法也许不尽相同，但大同小异，建议自己查阅相关文档正确添加好新页面。

接下来在[足迹]页面添加足迹图其实就是在 MarkDown 文件中引入 JavaScript 代码。

准备所需 JS 文件

首先在 ECharts 下载页面下载所需的文件，这里使用的完整版的文件（echarts.min.js)。另外还需要下载地图文件（例如这里使用的是中国地图，就需要 china.js ），目前 ECharts 官方的下载由于相关的法规暂时无法下载，但是如果官方不提供下载就找不到资源的可以转行了。

要想在 MarkDown 中引入 JavaScript 首先要把相应的文件添加进主题的 js 资源文件夹中。例如我使用的是 next 主题，那么我就把刚刚的两个文件添加进 themes/next/source/js/src/ 文件夹中。

引入 JavaScript 代码

MarkDown 引入 JavaScript 代码的方式和 HTML 一样，如下：

1
<script type="text/javascript" src="/js/src/echarts.min.js"></script>

引入所需的 JS 文件后可以在 MarkDown 文件中使用 <script> 标签添加前面已经写好的足迹图的代码。但是这种方法往往需要压缩 JS 代码而不方便以后的修改。因此建议在 themes/next/source/js/src/ 文件夹中新建 JS 文件写好代码再一起引入。写入文件中的完整足迹图代码如下：

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
var myChart = echarts.init(document.getElementById('myMap'));

var data = [
    {name: '吴川', value: ['1995.11 ～ forever', '出生成长的地方，永远的家']},
    {name: '苏州', value: ['2015.9 ～ now', '15年就读苏州大学，有幸在这个江南水乡生活']},
    {name: '北京', value: ['2016.07', '暑期游']},
    {name: '无锡', value: ['2017.03', '太湖鼋头渚国际樱花动漫节']}
];
var geoCoordMap = {
    '吴川':[110.364977,21.274898],
    '苏州':[120.619585,31.299379],
    '北京':[116.405285,39.904989],
    '无锡':[120.301663,32.5]
};

var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
            //console.log(res)
        }
    }
    return res;
};

option = {
    // backgroundColor: '#404a59',
    title: {
    },
    tooltip: {
        trigger: 'item',
        padding: 10,
        backgroundColor: '#222',
        borderColor: '#777',
        borderWidth: 1,
        formatter: function (params) {
            name = params.name
            time = params.value[2]
            describe = params.value[3]
            return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">'
                + name
                + '</div>'
                + time
                + '<br>'
                + describe;
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: false,
        itemStyle: {
            normal: {
                areaColor: '#e6e6e6',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#cccccc'
            }
        }
    },
    series : [
        {
            name: '足迹',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: convertData(data),
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
                normal: {
                    formatter: '{b}',
                    position: 'right',
                    show: true
                }
            },
            itemStyle: {
                normal: {
                    color: '#4d4d4d',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};

myChart.setOption(option);

MarkDown 文件如下：

1
2
3
4
<div id="myMap" style="width: 100%;height:600px;"></div>
<script type="text/javascript" src="/js/src/echarts.min.js"></script>
<script type="text/javascript" src="/js/src/china.js"></script>
<script type="text/javascript" src="/js/src/footprint.js"></script>

值得注意的是 div 的 id 不要取 main，因为 mian 是一个网站的主 div 经常使用的 id ，很有可能会导致页面无法正常显示而且无任何报错信息。

到这里足迹页面就写好了，欢迎访问我的足迹页面查看效果。