f2 柱状图滚动 钉钉小程序_钉钉小程序图表刷新 antv-f2

公司有项目拟在钉钉小程序中实现部分功能，其中需要图表展示，经过与echart的比较，最终选择了阿里系的 F2，f2宣传的是“专注于移动，兼容多种环境(Node, 小程序，Weex)”，且有相关支持的文档，没有看到echart对阿里系的小程序支撑。

钉钉小程序引入F2

首先钉钉小程序如何引入F2图表，点击这里，参考支付宝的内容即可。

f2官方文档点这里

新手建议直接用 npm install @antv/my-f2 的方式引入，不要研究js引入，以及插件化的引入。

一个页面多个图表

我这个程序需要一个页面里有多个图表展示，那么就需要多个 canvas 进行渲染。

图表数据自动刷新

同时，还有需求是点击页签后，图表数据需要刷新，一开始想的是一个页签对应一套图表，页签变化，对应的图表就展示出来，越想这种方式越low，查了半天文档，发现f2 有 chart.changeData(data) 这个方法，马上就上手试一试。问题又来了，点击事件后，如何获取chart 对象，毕竟小程序不像 HTML那么容易通过document进行DOM操作。晚上睡了一觉，第二天突然就想到了全局变量的方式，页面图表init的时候，就把chart 对象赋值给全局对象，页签变动后，直接操作chart对象即可，而且官方API中 chart的所有方法都能用了。

下面直接上代码

页面代码

JS

import F2 from '@antv/my-f2';

let app = getApp();

let url = app.globalData.url;

// 图表的全局变量

let chart1 = null;

let chart2 = null;

let chart3 = null;

let data12 = [

{ year: '圣', sales: 100 },

{ year: '牌', sales: 10 },

];

let data11 = [

{ year: '圣', sales: 138 },

{ year: '牌', sales: 102 },

];

let data10 = [

{ year: '圣', sales: 238 },

{ year: '牌', sales: 152 },

];

let data20 = [

{ country: '明', population: 1314 },

{ country: '清', population: 2022 },

];

let data21 = [

{ country: '明', population: 1014 },

{ country: '清', population: 1022 },

];

let data22 = [

{ country: '明', population: 14 },

{ country: '清', population: 122 },

];

function drawChart11(canvas, width, height) {

chart1 =