前言：

前段时间，在接触了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中如下配置

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://npm.elemecdn.com/echarts@5.3.0/dist/echarts.min.js"></script> #ECharts动态图表
- <script src="https://npm.elemecdn.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://npm.elemecdn.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】

基础柱状图

效果：

{% 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 %}

https://echarts.apache.org/handbook/zh/how-to/chart-types/bar/basic-bar

基础折线图

效果：

{% echarts 400 '85%' %}
option = {
  xAxis: {
    type: 'category',
    data: ['A', 'B', 'C']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150],
      type: 'line'
    }
  ]
};
{% endecharts %}

https://echarts.apache.org/handbook/zh/how-to/chart-types/line/basic-line

基础饼图

效果：

{% echarts 400 '85%' %}
option = {
  series: [
    {
      type: 'pie',
      data: [
        {
          value: 335,
          name: '直接访问'
        },
        {
          value: 234,
          name: '联盟广告'
        },
        {
          value: 1548,
          name: '搜索引擎'
        }
      ]
    }
  ]
};
{% endecharts %}

https://echarts.apache.org/handbook/zh/how-to/chart-types/scatter/basic-scatter

基础散点图

效果：

{% 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 %}