4

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

 10 months ago
source link: https://loli.fj.cn/2023/06/18/%E5%9C%A8Hexo%E4%B8%AD%E6%B8%B2%E6%9F%93Echarts%E5%9B%BE%E8%A1%A8/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

2023-06-18

在Hexo中渲染Echarts图表

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的高度

{% 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
稀土掘金——已注销


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK