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 中使用组件来实例

查看类=”container-echarts margin-top-10

ec-canvas class=”mycharts” id=”mychart-dom-bar” canvas-id=”mychart-bar” ec=”{{ ec }}”/ec-canvas

/看法

js文件中

首先需要引入echarts，然后就可以使用下面的initChart方法，所以根据放置的ec-canvas的路径引入echarts。

从‘ 导入* 作为echarts

xxx/xxx/xxx/ec-canvas/echarts’； //根据放置ec-canvas的路径引入echarts

let Chart=null //使用变量来保存echarts的初始化

let options={ //图形配置，用过echarts的都知道什么意思~这里是官网折线图的基本例子

x轴：{

类型：‘类别’，

数据：[‘周一’、‘周二’、‘周三’、‘周四’、‘周五’、‘周六’、‘周日’]

},

y 轴：{

类型：‘值’

},

系列： [{

数据：[150, 230, 224, 218, 135, 147, 260],

类型：'线'

}]

}

function initChart(canvas, width, height, dpr) { //这里的canvas, width, height, dpr可以忽略

const 图表=echarts.init(canvas, null, {

宽度：宽度，

高度： 高度，

devicePixelRatiodpr //像素

});

canvas.setChart(图表);

图表.setOption(选项);

返回图表；

}

页（{

数据： {

欧共体：{

onInitinitChart //这里不要添加括号！

}

}

});

保存并运行。至此，理论上echarts就可以显示了。实际使用中，还是要自己调试。

使用图表变量来保存echarts的初始化。官网的方法里也写了选项，所以我就拿出来了。

那么图表有什么用呢？因为大部分数据都是异步获取的，所以echarts必须动态渲染。拿到数据后，就用这个图表。

图表.setOption({

x轴：{

数据：newData.map(item={

返回项目[0]；

})

},

系列： {

数据：newData.map(item={

返回项目[1]；

})

}

})

我们定义的data数据

数据： {

isUseNewCanvastrue //这里改为true，默认为false

}

在组件中使用数据 2种方式

! 新：界面与H5 一致

画布wx：if=“{{isUseNewCanvas}}”type=“2d”class=“ec-canvas”canvas-id=“{{canvasId}}”bindinit=“init”bindtouchstart=“{{ec.disableTouch？ ” 'touchStart' }}” bindtouchmove=”{{ ec.disableTouch ? ” ‘touchMove’ }}” bindtouchend=”{{ ec.disableTouch ? ” ‘touchEnd’ }}”/canvas

！- 老的-

canvas wx：else class=“ec-canvas”canvas-id=“{{canvasId }}”bindinit=“init”bindtouchstart=“{{ec.disableTouch？ ” ‘touchStart’ }}” bindtouchmove=”{{ ec .disableTouch ? ” 'touchMove' }}” bindtouchend=”{{ ec.disableTouch ? ” ‘touchEnd’ }}”/canvas

3. 分包加载

好了，以上就是我们使用echarts的步骤了，但是echarts文件大小为500KB+，严重影响了我们项目的打包大小，所以这里必须使用分包。

app.json里面有一个子包

{

“子包”：[

{

“根”：“xxx/xxx”，

“姓名”：“xxx”，

“独立”：假，

“页面”：[

“页数/xxx”，

“页数/xxx”，

“页数/xxx”

]

},

{

"root""baoziTask/",

"name""包子",

“页面”：[

“页面/肉包子/肉包子”

]

}

],

}

这个分包在官网上说的挺简单的，但是我使用的时候是这么理解的。

root是要分包的路径，放在根目录下。那么baoziTask下的所有文件都会被认为是一个包。不在baoziTask路径下的文件会被打包到app的主包中。

name是子包的别名，预下载时会用到。这种预下载是当你在某个页面时，想要主动下载这个可能用于提高访问速度的子包。

例如，当我进入某个页面时，我很可能会点击某个地方来跳转到某个子包。这时候我可以预先下载子包，而不是只有跳转的时候才下载子包。

独立是指分包是否独立，但我没有使用过，没有直观的感觉。据说可以独立运行，不依赖app主包。这个需要配置，不是下载代码，配置preloadRule。具体的还得去官网查看并亲自尝试一下。