最近要做图表展示，所以要找一些工具，网上找了很多，看了一圈选中了 AntV。

• 选择理由：★★★★★ 五颗星--阿里出品
• 最主要的是： 全中文，而且文档超全，样例还能在线编辑，真是强大至极啊；

使用说明：

一、使用过程中主要是用到2个页面

• 使用教程
  这里可以查到数据类型、数据配置、数据例子等等，能用到的这里基本全有了；
• 在线编辑
  这里可以在线编辑，也可以选择喜欢的例子进行克隆，超级方便；

二、数据组装

• 根据例子中的数据形式，全部使用json，但是还有一种类型，我没研究，索性就直接用json了，毕竟很方便，不过直接通过ajax返回的json好像不支持呢（js学艺不精呢。。。），我就用了笨方法，通过php将数组生成到一个json文件中，所以直接在js中引用json数据，有点笨但是行得通啊。。不管了。。

  
  image.png
  • !注：生成json文件这里有个小坑，就是权限问题，一定要在新建文件之后，把权限直接加上，不然到时候莫名其妙的不生效；

• json结构：

[
{"type":"as","num":9},
.
.
.
{"type":"fe","num":6}
]

- 然后在js中就是组装图表了
1.表格代码直接从你选好的图表中copy下来,标记的地方差不多做一下相应修改；
![image.png](http:https://img.haomeiwen.com/i1870882/232f239cb0927111.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2.修改图表x轴、y轴名称，以及数据源名称等等，这个比葫芦画瓢都能会用；
3.当然了这里面有些东西还是要变化一下的，不如x轴的分类应该跟json数据源中对应上，这就需要自己提前封装好，这边直接调方法引过来；还有就是每个分类的颜色要跟总数对应上，这里我是通过获取分类的数组总长度然后随机生成这么多个颜色，然后组装成数组直接用的；

function getRandomColor(data) {
randColor = [];
for (var i = 0; i < data.length; i++) {
color = "#" + ("00000" + ((Math.random() * 16777215 + 0.5) >> 0).toString(16)).slice(-6);
randColor.push(color)
}
return randColor;
}

4.差不多就做这些东西，图表就出来了，好用死了O(∩_∩)O~

#最后来个成果展示吧:

![](http:https://img.haomeiwen.com/i1870882/6a05e3e730226f08.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 这个属于2类数据 [个数，业务线]，支持切换业务线；




![](http:https://img.haomeiwen.com/i1870882/2659cc10b573973c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 这个属于3类数据 [比例，名称，业务线]，前两个是x轴，y轴，然后业务线用作切换展示用；

@2017-07-20 18:15:52  要下雨。。。