项目涉及图表部分的技术选型
对于图表这块的开发,使用一些流行的图表库可以大大提高我们的开发效率,目前较为流行的图表库大概有Echarts,Hcharts,AntV,他们都是大同小异,我印象比较深刻的是Hcharts是支持多坐标轴的,Echarts好像是不支持的,但是对于小程序的选择我们选择的是阿里的AntV-f2,因为他明确指出了适合小程序开发,而且AntV-f2除了不支持一些document,其他的大部分功能都是支持的,我们就没有再考虑其他的库,但是官方并没有太多关于小程序的具体使用文档,我们只能根据js的相关事例翻译成小程序的语法。
前期准备
AntV - F2的集成
安装f2
npm install @antv/f2 --save
安装my-f2 ,至于为什么要再包装一层my-f2,可以看下这篇文档 : 聊一聊 F2 与小程序
npm install @antv/my-f2
开发前需要了解一些图表的api,比如tooltip、guide、legend、coord 等。具体可参考api文档。
屏幕快照 2019-07-27 上午10.01.26.png
完成以上步骤后我们先来集成一个折线图吧
1.通过canvas创建一个图表
id="am-mc-line-{ {$id}}"
height="{ {height}}"
width="{ {width}}"
onTouchStart="t