钉钉小程序图表库AntV - F2 使用总结

对于图表这块的开发，使用一些流行的图表库可以大大提高我们的开发效率，目前较为流行的图表库大概有Echarts,Hcharts,AntV,他们都是大同小异，我印象比较深刻的是Hcharts是支持多坐标轴的，Echarts好像是不支持的，但是对于小程序的选择我们选择的是阿里的AntV-f2，因为他明确指出了适合小程序开发，而且AntV-f2除了不支持一些document，其他的大部分功能都是支持的，我们就没有再考虑其他的库，但是官方并没有太多关于小程序的具体使用文档，我们只能根据js的相关事例翻译成小程序的语法。

钉钉小程序开发工具： https://open-doc.dingtalk.com/microapp/kn6zg7/zunrdk#%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%BC%80%E5%8F%91%E8%80%85%E5%B7%A5%E5%85%B7

AntV - F2： https://antv.alipay.com/zh-cn/f2/3.x/demo/index.html

效果看着有点丑对不对......那我们就来实现一下设计师的效果图吧！具体功能：1.默认展示一个tooltip, 2.tooltip改变时展示对应x轴的数据，3.自定义tooltip

我们自定义一个默认的tooltip:, 就叫做def_item吧，当图表渲染完成设置def_item = {key: 100, value: 200},这里有个注意点，就是def_item的内容不是随便定义的，这里我们先不做多说，后面会说明这个def_item的key值时如何设置的。

通过查找tooltip的Api我们会发现它有3个事件的回调，在钉钉小程序中我们只能通过props来传递tooltip的回调

优化后的效果

类似echarts小程序的图表组件列举：

1、fusionCharts

FusionCharts是一个跨平台，能够跨浏览器的flash图表组件，能够被ASP NET、JSP、ColdFusion、ASP、PHP、Ruby on Rails、简单HTML页面甚至PPT调用。FusionCharts利用Flash创建了紧凑、互动性和视觉逮捕图表，还可以用来制作数据动画图表。

2、Highcharts

Highcharts是一个用纯JavaScript编写成的一个图表库， 能够很简单便捷的在Web网站或Web应用程序添加有交互性的图表。

可支持的图表类型包括直线图、饼状图、仪表图、气泡图、散状点图、曲线图、区域图、柱状图、瀑布流图等20多种图表，其中很多图表可以集成在同一个图形中形成混合图。

3、AntV-f2

AntV-f2是一个专注于移动，开箱即用的可视化解决方案，支持H5环境和兼容多种环境。里面具备了比较完整的图形语法理论和组件，具有多种移动端图表和各类场景，而且个人可以构建各类图表（50种以上）。

扩展资料

制作图表时要注意：

1、要有自身的表达特性，尤其对时间、空间等概念的表达和一些抽象思维的表达具有文字和言辞无法取代的传达效果。图表要具有表达的准确性，对所示事物的内容、性质或数量等处的表达应该准确无误。

2、要有信息表达的可读性，在图表认识中应该通俗易懂，尤其是用于大众传达的图表。

3、制作图表要有艺术性，图表是通过视觉的传递来完成，必须考虑到人们的欣赏习惯和审美情趣，这也是区别于文字表达的艺术特性。

异步加载调接口请点这里 https://pan.baidu.com/s/1W5Z-QWm1gNJGw9oX5CltDQ

提取码：vb0i

我是跟pages放在了同级

如：在 page目录的cc页面中使用echarts的话，需要在cc.json中添加以下配置。

---