小程序echarts和分包使用

1. 需求详解
   很多时候,我们在项目中会大量使用到可视化图表数据,在大量工作中,我们最熟悉的可视化数据一定是echarts这个工具,它非常好用并免费.听起来很香,对!它真的很香。

但是当我们在特定场景中,比如小程序,那它就是一个非常头痛的存在,为什么?在小程序中代码上传大小规定只有2M,而echarts在小程序中使用必须要在本地使用,无法使用连接的方式外部引用(微信官方规定项目有请求白名单)。

那么在项目中使用了echarts会非常占用我们有限的空间,那怎么办呢，下面就告诉大家在小程序项目使用可视化工具的方法。

2. 使用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