小程序开发-6在小程序中使用echarts图表小结

239 阅读1分钟

引入

  • 从官网下载demo项目,并从中取到【ec-canvas文件夹】
  • 将ec-canvas文件夹复制到自己的项目中(比如放在utils)里

使用

  • 使用可以跟着官方demo走,按照demo修改页面的wxss、wxml、js、json文件

注意js文件的引入echarts.js路径,以及json文件引入组件的路径,要和自己项目实际的一致

错误及注意事项

文件超过500kb警告

  • 不用管这个警告,不会影响正常使用,在上传时小程序会自动解决es6转换等问题

自己的项目中echarts不显示

  1. echarts的组件外部需要一层包裹
  2. 外层包裹需要指定一些样式,具体样式在官方demo app.wxss中有,也可以写在使用echarts的页面wxss中
  3. echarts组件指定宽高100%

另外,如果json中的引入时组件命名错了,也是不报错也不显示的。。。别问我怎么知道

在预览和真机调试中不显示

  • 似乎是预览状态不支持canvas,可以上传体验版来测试真机效果

官方文档