前言：
前段时间，在接触了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 | inject: |
或者
1 | - <script src="https://npm.elemecdn.com/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>可以不用添加
【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 | <script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script> |
然后替换即可
地图资源
地图是echarts.js中没有的，所以需要额外引入。好在ECharts还是提供了中国地图、世界地图，以及各省地图
对应的CDN可以通过这个链接来找https://cdn.jsdelivr.net/npm/echarts@4.7.0/map/js/
安装插件
我从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 | {% echarts 400 '85%' %} |
作者也留下了他的Demo在 Hexo 中插入 ECharts 动态图表 - KChen’s Blog
我结合ECharts官方示例的尝试
以下内容，代码及其属性描述主要是来自ECharts官方【Apache ECharts官网】
接下来是我的使用尝试
【我的个人博客www.226yzy.com】
基础柱状图
效果：
基础折线图
效果：
基础饼图
效果：
基础散点图
效果：
参考文献
在 Hexo 中插入 ECharts 动态图表 - KChen’s Blog
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许可协议。