评论

小程序开发之如果在小程序中使用图表echarts

自己做的记账小程序,最近在做记账统计功能,所以涉及到图表制作,。 web项目自己一直再用echarts 于是就看看小程序里面该怎么用呢,

自己做的记账小程序,最近在做记账统计功能,所以涉及到图表制作,。

web项目自己一直再用echarts 于是就看看小程序里面该怎么用呢,

第一步:git clone https://github.com/ecomfe/echarts-for-weixin.git

先去把这个插件下载下来然后放到 pages 目录里面作为一个组件来使用

第二部:然后在需要使用得页面引入

引入完成以后 在页面里面进行初始化

初始化完成以后呢

在调用接口获取 数据 组装 option

组装完成以后呢

在进行setOption 进行渲染就好了

这里注意一下有时候可能会出现不显示。。就是chart 找不到

这里采用一个定时器得方案来解决

OK 基本使用就是这样。。。


最后一次编辑于  2022-11-07  
点赞 3
收藏
评论

1 个评论

  • ⅴ
    2022-11-07

    有时候chart找不到是因为切换表格时,dom没有渲染完成,100ms虽然大概率够了,但是仍存在渲染未完成的可能。

    我这里用了循环,每50ms判断一次chart是否存在,不存在就再等50ms。

    let sleep = (delay) => new Promise((resolve) => setTimeout(resolve, delay));
    while (chart === undefined){ // 等待视图切换后dom渲染完成
       await sleep(50);
    }
    
    2022-11-07
    赞同
    回复 1
    • 顺其自然
      顺其自然
      2022-11-07
      是的 目前我每测出来 问题 你这确实是个不错得解决办法
      2022-11-07
      回复
登录 后发表内容