【笔记】在Hexo中渲染Echarts图表

发表于 更新于 阅读次数：

前言

在Hexo中渲染Echarts图表

下载依赖

1
npm install hexo-tag-echarts-new

hexo-tag-echarts与hexo-tag-echarts3的作者已经长期为更新，而且在引入模块后仍然需要通过<script></script>标签手动引入echarts.js文件，但是hexo-tag-echarts-new模块在使用时不需要通过<script></script>标签手动引入echarts.js文件

在md文件内引入Echarts图表

300：指定Echarts的宽度
400：指定Echarts的高度

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{% echarts 300 400 %}
// 在此处直接编辑Echarts的option对象
{
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
}
{% endecharts %}

完成

参考文献

d-sketon的博客
D-Sketon/hexo-tag-echarts-new
KChen’s Blog
kchen0x/hexo-tag-echarts3
tea3/hexo-tag-twentytwenty
稀土掘金——已注销