npm 包 hexo-tag-antv 使用教程

阅读时长 4 分钟读完

前言

hexo-tag-antv 是一个在 Hexo 博客中使用 AntV G2 或 G6 图表的插件,让你可以很方便地在你的博客文章中加入图表来更好地展示数据。本文将详细介绍如何在 Hexo 中使用 hexo-tag-antv。

安装

  1. 在你的 Hexo 博客目录下安装 hexo-tag-antv:

  2. 安装需要的 AntV 库,可通过 npm install @antv/g2npm install @antv/g6 来安装。

使用

G2 图表

  1. 在 Hexo 文章中使用以下标签:

  2. 按照 G2 的常规套路编写图表代码即可,也可以参照插件 README.md 中提供的 G2 示例代码:

    -- -------------------- ---- -------
    -- -- --
    ---- --------------
    --------
      ----- ---- - -
        ------- --------- ----- -----
        ------- ----------- ----- -----
        ------- --------- ----- -----
        ------- ---------- ----- -----
        ------- -------- ----- ----
      --
      
      ----- ----- - --- ----------
        ---------- -----
        --------- -----
        ------- ---
      ---
      
      -------------------
      ------------------- -
        ----- ----
      ---
      -------------------------------------------------------
      ---------------
    ---------
    -- ----- --

G6 图表

  1. 在 Hexo 文章中使用以下标签:

  2. 按照 G6 的常规套路编写图表代码即可,也可以参照插件 README.md 中提供的 G6 示例代码:

    -- -------------------- ---- -------
    -- -- --
    ---- ---------------------
    --------
      ----- ----- - --- ----------
        ---------- ------------
        ------ ----
        ------- ---
      ---
    
      ----- ---- - -
        ------ -
          - --- -------- -- --- -- -- --
          - --- -------- -- ---- -- -- --
          - --- -------- -- ---- -- --- --
          - --- -------- -- --- -- --- -
        --
        ------ -
          - ------- -------- ------- ------- --
          - ------- -------- ------- ------- --
          - ------- -------- ------- ------- --
          - ------- -------- ------- ------- -
        -
      --
    
      -----------------
      ---------------
    ---------
    -- ----- --

结束语

通过本文的介绍,你已经学会了如何在 Hexo 中使用 hexo-tag-antv 插件来展示图表。使用这个插件可以让你的博客更加美观和直观,希望你能在以后的博客文章中恰当地运用这个插件。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/6005682f81e8991b448e4488

纠错
反馈