- 需求详解
很多时候,我们在项目中会大量使用到可视化图表数据,在大量工作中,我们最熟悉的可视化数据一定是echarts这个工具,它非常好用并免费.听起来很香,对!它真的很香。
但是当我们在特定场景中,比如小程序,那它就是一个非常头痛的存在,为什么?在小程序中代码上传大小规定只有2M,而echarts在小程序中使用必须要在本地使用,无法使用连接的方式外部引用(微信官方规定项目有请求白名单)。
那么在项目中使用了echarts会非常占用我们有限的空间,那怎么办呢,下面就告诉大家在小程序项目使用可视化工具的方法。
- 使用echarts
首先去官网,相对于有小程序开发经验的开发者来说, 步骤比较简单。大体上的步骤:
1、下载官网例子。
2、把官网例子中的ec-canvas文件夹复制到项目目录中。
3、在具体的页面中像使用组件一样引入ec-canvas。
4、在具体的页面的js中进行初始化。
在下载完官网例子后,找到ec-canvas文件夹,里面有echarts.js,wx-canvas.js还有ec-canvas四件套。
然后把这个文件夹复制到自己项目的目录下,放到utils下的,后来分包之后就放别的地方,这里就当放在utils下了。然后项目就大了700+KiB。
页面中的使用 xxx.json文件中
{
“usingComponents”: { “ec-canvas”: “xxx/xxx/xxx/ec-canvas/ec-canvas” }
}
xxx.wxml 中使用组件来实例
js文件中
首先要引入echarts然后才能用下面的initChart方法,所以根据放置的ec-canvas的路径引入echarts。
import * as echa