前言
hexo-tag-antv 是一个在 Hexo 博客中使用 AntV G2 或 G6 图表的插件,让你可以很方便地在你的博客文章中加入图表来更好地展示数据。本文将详细介绍如何在 Hexo 中使用 hexo-tag-antv。
安装
在你的 Hexo 博客目录下安装 hexo-tag-antv:
$ npm install hexo-tag-antv --save
安装需要的 AntV 库,可通过
npm install @antv/g2
或npm install @antv/g6
来安装。
使用
G2 图表
在 Hexo 文章中使用以下标签:
{% g2 %} // 这里写 G2 代码 {% endg2 %}
按照 G2 的常规套路编写图表代码即可,也可以参照插件 README.md 中提供的 G2 示例代码:
-- -------------------- ---- ------- -- -- -- ---- -------------- -------- ----- ---- - - ------- --------- ----- ----- ------- ----------- ----- ----- ------- --------- ----- ----- ------- ---------- ----- ----- ------- -------- ----- ---- -- ----- ----- - --- ---------- ---------- ----- --------- ----- ------- --- --- ------------------- ------------------- - ----- ---- --- ------------------------------------------------------- --------------- --------- -- ----- --
G6 图表
在 Hexo 文章中使用以下标签:
{% g6 %} // 这里写 G6 代码 {% endg6 %}
按照 G6 的常规套路编写图表代码即可,也可以参照插件 README.md 中提供的 G6 示例代码:
-- -------------------- ---- ------- -- -- -- ---- --------------------- -------- ----- ----- - --- ---------- ---------- ------------ ------ ---- ------- --- --- ----- ---- - - ------ - - --- -------- -- --- -- -- -- - --- -------- -- ---- -- -- -- - --- -------- -- ---- -- --- -- - --- -------- -- --- -- --- - -- ------ - - ------- -------- ------- ------- -- - ------- -------- ------- ------- -- - ------- -------- ------- ------- -- - ------- -------- ------- ------- - - -- ----------------- --------------- --------- -- ----- --
结束语
通过本文的介绍,你已经学会了如何在 Hexo 中使用 hexo-tag-antv 插件来展示图表。使用这个插件可以让你的博客更加美观和直观,希望你能在以后的博客文章中恰当地运用这个插件。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005682f81e8991b448e4488