在 Hexo 中插入 AntV 动态图表

Author Avatar
wshunli 11月 30, 2017
  • 在其它设备中阅读本文章

让数据栩栩如生

AntV 介绍

AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。

Hexo 中使用 AntV

hexo-tag-antv 是一款在 Hexo 中使用 AntV 的插件。

插件的安装和使用非常的简单,只需要进入博客目录,然后安装:

$ npm install hexo-tag-antv --save

之后在文章内使用 antv 的 tag 就可以了:

{% antv 300 %}
data:[
    // TODO antv data goes here
],
options: {
    // TODO antv options goes here
}
{% endantv %}

其中:
antvendantv 是 Hexo 的标签,不需要修改;
300 是指图表的高度,图表宽度是自适应的;
data 部分是图表的数据;
options 部分是图表的配置。

const options = {
  scales: {object}, // 列定义声明
  coord: {object}, // 坐标系配置
  axes: {object}, // 坐标轴配置
  legends: {object}, // 图例配置
  guides: {array}, // 图表辅助元素配置
  filters: {object}, // 数据过滤配置
  tooltip: {object}, // 提示信息配置
  facet: {object}, // 分面配置
  geoms: {array} // 图形语法相关配置
}

更详细配置可参考官方文档:配置项声明方式

下面我们来看一个饼图的使用样例:

{% antv %}
data:[
  { genre: 'Sports', sold: 275 },
  { genre: 'Strategy', sold: 115 },
  { genre: 'Action', sold: 120 },
  { genre: 'Shooter', sold: 350 },
  { genre: 'Other', sold: 150 }
],
options: {
    scales: {
      'genre': {
        alias: '游戏种类'
      },
      'sold': {
        alias: '销售量'
      }
    },
    geoms: [
      {
        type: 'percent',
        position: 'genre*sold',
        color: 'genre'
      }
    ]
  }
{% endantv %}

即开头的图表效果。

灵感来自 hexo-tag-echarts3,AntV 也刚刚发布了 3.0 版本所以就想尝试下。
最主要目的还是尝试发布自己的 npm 组件,可能现在还不够实用,后面我会不断完善。

参考资料
1、发布自己的module - 我的第一个npm组件!
https://segmentfault.com/a/1190000006250554
2、在 Hexo 中插入 ECharts 动态图表
http://kchen.cc/2016/11/05/echarts-in-hexo/
3、标签插件(Tag) | Hexo
https://hexo.io/zh-cn/api/tag.html
4、Hexo高级教程之插件开发
http://www.ieclipse.cn/en/2016/07/18/Web/Hexo-dev-plugin/index.html

如果本文对您有所帮助,且您手头还很宽裕,欢迎打赏赞助我,以支付网站服务器和域名费用。 https://paypal.me/wshunli 您的鼓励与支持是我更新的最大动力,我会铭记于心,倾于博客。
本文链接:https://www.wshunli.com/posts/hexo-tag-antv.html