前言:

前段时间,在接触了ECharts,感觉它的效果非常合我意,所以打算看看能不能通过hexo在写博客的时候使用(毕竟写总结的时候还是很有可能用得上的)。但可惜好像没法直接用(虽然可以专门另写一个js,但是感觉不在文章内容不在md文件中不太好)。虽然自己尝试失败了,但我在Hexo官网中查到了有这种插件,所以就有了本文。(头一次想起来Hexo官网可以找一些有用的插件,差点以为以后不会再打开了🤣)

【转载说明】本文优先发布于我的个人博客www.226yzy.com ,转载请注明出处并注明作者:星空下的YZY。

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0许可协议。

引入Apache ECharts

首先在官方的教程中需要在head中引入echarts.js,EChart的官网:【Apache ECharts官网

因为echarts.js 必须在渲染 echarts 实例的 JavaScript 前引入。下文所说的插件其实有实现在每个 echarts 实例前都引入echarts.js,所以是可以不用在head中引入(但地图这种还是需要自己引入的,当然这个也需要在echarts 实例前引入)具体见下文补充

在butterfly主题中,我们可以在主题配置文件的inject中如下配置

1
2
3
4
inject:
head:
- <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
- <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/map/js/china.min.js"></script> # 绘制地图需要另外添加 china.js

或者

1
2
- <script src="https://unpkg.com/echarts@5.3.0/dist/echarts.min.js"></script> #ECharts动态图表
- <script src="https://unpkg.com/echarts@4.7.0/map/js/china.js"></script> # 绘制地图需要另外添加 china.js

注:如果不需要使用中国地图上面的- <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/map/js/china.min.js"></script>可以不用添加

【2022-02-15记】我发现其实插件中是有引入echarts.js,所以可以不用像上面一样引入echarts.js,但是插件中使用版本很老(是3.8.0,现在最新的都5.3.0了,新一点的视觉效果也有优化嘛😂),所以建议大家去把插件中的CDN换成较新的版本

如果你安装了Echarts的插件,那么具体需要修改的文件路径是node_modules\hexo-tag-echarts3\template.html中第二行的

1
<script src="https://cdn.bootcss.com/echarts/3.8.0/echarts.common.min.js"></script>

将上面的CDN换成较新的版本

比如,当前最新版本是5.3.0

1
2
3
<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
//或者
<script src="https://unpkg.com/echarts@5.3.0/dist/echarts.min.js"></script>

然后替换即可

地图资源

地图是echarts.js中没有的,所以需要额外引入。好在ECharts还是提供了中国地图、世界地图,以及各省地图

对应的CDN可以通过这个链接来找https://cdn.jsdelivr.net/npm/echarts@4.7.0/map/js/

安装插件

Echarts的插件

我从Hexo官网找到了这个插件

安装命令如下

1
npm install hexo-tag-echarts3 --save

这个插件也可以在GitHub上找到:kchen0x/hexo-tag-echarts3: A simple plugin for inserting ECharts 3 by using tags in Hexo. (github.com)

正如上文所说,建议大家将插件中的CDN换成较新的版本😂

Chart.js的插件

如果你不喜欢Echarts的风格,也可以看看Chart.js的,这是它的官网:【Chart.js | 开源的 HTML5 图表工具 (bootcss.com)

(发现这个是看了这位大佬的在 Hexo 中插入 Chart 动态图表 | 岛 (gitee.io),原本以为找到的是ECharts的😅)

安装命令如下

1
npm install hexo-tag-chart --save
  • 使用示例

    由于我不使用该插件,所以该插件的基本使用引用了该插件作者的描述,具体可以见其原文【原文:在 Hexo 中插入 Chart 动态图表 | 岛 (gitee.io)

    安装插件之后在文章内使用 chart 的 tag 就可以了

    1
    2
    3
    {% chart 90% 300 %}
    \\TODO option goes here
    {% endchart %}

    其中 chart 是标签名,endchart 是结束标签,不需要更改,90% 是图表容器的相对宽度,默认是100%300 是图表容器的高度,默认是按正常比例缩放的,你可以通过设置 options 里面的 aspectRatio 属性来调整宽高比例,另外还有许多属性可以自定义,你可以查看 官方文档。在标签之间的部分,都是需要自己填充的图表数据和属性。

使用示例

我还是倾向于使用ECharts的,所以以下内容是有关ECharts

插件作者的示例

插件作者使用示例如下

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

作者也留下了他的Demo在 Hexo 中插入 ECharts 动态图表 - KChen’s Blog

我结合ECharts官方示例的尝试

以下内容,代码及其属性描述主要是来自ECharts官方【Apache ECharts官网

接下来是我的使用尝试

【我的个人博客www.226yzy.com】

基础柱状图

效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% echarts 400 '85%' %}
option = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {},
series: [
{
type: 'bar',
data: [23, 24, 18, 25, 27, 28, 25]
}
]
};
{% endecharts %}

基础折线图

效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% echarts 400 '85%' %}
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C']
},
yAxis: {
type: 'value'
},
series: [
{
data: [120, 200, 150],
type: 'line'
}
]
};
{% endecharts %}

基础饼图

效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{% echarts 400 '85%' %}
option = {
series: [
{
type: 'pie',
data: [
{
value: 335,
name: '直接访问'
},
{
value: 234,
name: '联盟广告'
},
{
value: 1548,
name: '搜索引擎'
}
]
}
]
};
{% endecharts %}

基础散点图

效果:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
{% echarts 400 '85%' %}
option = {
xAxis: {
data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
},
yAxis: {},
series: [
{
type: 'scatter',
data: [220, 182, 191, 234, 290, 330, 310]
}
]
};
{% endecharts %}

参考文献

在 Hexo 中插入 ECharts 动态图表 - KChen’s Blog

Handbook - Apache ECharts

Chart.js · GitBook (bootcss.com)

在 Hexo 中插入 Chart 动态图表 | 岛 (gitee.io)

最后

暂时就上面这些吧

欢迎访问我的小破站 https://www.226yzy.com/ 或者【GitHub版镜像 https://226yzy.github.io/ 或Gitee版镜像 https://yzy226.gitee.io/

我的Github:https://github.com/226YZY

【转载说明】本文优先发布于我的个人博客www.226yzy.com ,转载请注明出处并注明作者:星空下的YZY。

本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0许可协议。