自己做的记账小程序,最近在做记账统计功能,所以涉及到图表制作,。
web项目自己一直再用echarts 于是就看看小程序里面该怎么用呢,
第一步:git clone https://github.com/ecomfe/echarts-for-weixin.git
先去把这个插件下载下来然后放到 pages 目录里面作为一个组件来使用
第二部:然后在需要使用得页面引入
引入完成以后 在页面里面进行初始化
初始化完成以后呢
在调用接口获取 数据 组装 option
组装完成以后呢
在进行setOption 进行渲染就好了
这里注意一下有时候可能会出现不显示。。就是chart 找不到
这里采用一个定时器得方案来解决
OK 基本使用就是这样。。。
有时候chart找不到是因为切换表格时,dom没有渲染完成,100ms虽然大概率够了,但是仍存在渲染未完成的可能。
我这里用了循环,每50ms判断一次chart是否存在,不存在就再等50ms。
let sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay)); while (chart === undefined){ // 等待视图切换后dom渲染完成 await sleep(50); }