让数据栩栩如生

{% 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: 'interval',
position: 'genre*sold',
color: 'genre'
}
]
}
{% endantv %}

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 %}

其中：
antv 和 endantv 是 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