微信小程序引入echarts过大最佳解决方案、echarts在微信开发者工具中不跟随滑动、使用echarts控制台提示使用canvas 2d

一、微信小程序引入echarts过大最佳解决方案

微信上传时代码包大小限制为2MB，但是当我们引入echarts以后，单echarts代码包已经973KB，因此再结合额外的业务代码以及其他资源很有可能超过2MB的限制，那么我们如何解决这个问题呢，方案有两种：

 1、压缩echarts的大小

从echarts官网下载微信小程序集成DEMO以后，官方包内容如下：（ECharts官方文档链接）

通过各个文件大小判断，我们最佳方式就是压缩echarts.js这个文件的大小，其他文件原始大小也不大，压缩后效果有限。

我们通过官网文档的下载中官方自定义构建可以下载经过UglifyJS压缩后的echarts，也可以选择只含有实际项目使用到图表的echarts.js（因为默认通过官方DEMO下载的ec-canvas文件夹中含有微信小程序引入echarts的全部内容，但实际项目中可能用到了柱状图、折线图很多用不到的图表/工具没必要放在项目中占用代码大小）

大家可以根据实际项目情况选择用到的echarts组件进行构建，下图时我项目中使用到的组件自定义构建内容：

 选择完成以后，点击【下载】就可以下载我们自定义构建的echart文件了

注：勾选代码压缩以后下载的文件名称为：echarts.min.js

       未勾选代码压缩以后下载的文件名称为：echarts.js

 然后我们将自定义构建下载的echarts.min.js重命名为echarts.js再替换项目ec-canvas目录下的echarts.js就可以了，访问项目发现echarts相关图表渲染正常，控制台无任何异常输出，这样我们就将原本大小将近1000KB的echarts压缩了一半。

注：自定义构建下载的echarts.min.js重命名后放入项目后可能会出现无法渲染图表、控制台报undefined、找不到echart部分函数错误，说明我们在项目中所使用到的echarts的功能在自定义构建中没有选择到，这个时候需要我们认真核对自定义构建是否漏选了项目中使用到的功能。

2、使用分包

分包功能各位可以直接参考微信小程序官方文档就可以解决这个问题了:官方链接

二、echarts在微信开发者工具中不跟随滑动

在通过微信开发者工具的模拟器查看echarts时，我们会发现图表没有随着滚动条而滑动，但是在进行真机模拟的时候却又一切正常，这个时候我们可以在wxml的canvas中添加一个属性解决这个问题：

force-use-old-canvas="true"

 示例：

<ec-canvas force-use-old-canvas="true" id="{{echartData.recentTrendBar.id}}" canvas-id="mychart-multi-bar" ec="{{ echartData.recentTrendBar }}"></ec-canvas>

添加该属性后，控制台会提示如下信息，但是在模拟器中图表可以正常滑动了。

开发者强制使用旧canvas,建议关闭

注：该属性会强制使用旧的canvas渲染，建议在开发环境中使用，在生产环境不要使用，（期待未来echarts官方能够解决这个问题）；

三、使用echarts控制台提示使用canvas 2d

查看ec-canvas/ec-canvas.wxml内容如下：

<!-- 新的：接口对其了H5 -->
<canvas 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>

这里我们可以看到一个通过isUseNewCanvas进行判断使用新的/旧的canvas，因此我们只需要将对应ec-canvas/ec-canvas.js的isUseNewCanvas属性值改为true就可以了，

打开ec-canvas/ec-canvas.js，约在第49行内容修改如下：

 data: {
    isUseNewCanvas: true
  },

修改以后，控制台将不再提示该内容。