热点评！微信小程序使用ECharts的示例详解

安装 ECharts 组件

使用 ECharts 组件

图表延迟加载

echarts-for-weixin是 ECharts 官方维护的一个开源项目，提供了一个微信小程序组件（Component），我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表。

echarts-for-weixin自身包含很多使用示例，方便我们参考。

克隆项目：

切换版本：

echarts-for-weixin 最新的 Releases 版本为v2.0.0，内部使用的 ECharts 版本为5.1.1，详情可以参考Releases。

项目文件夹ec-canvas就是我们需要的 ECharts 组件文件夹，我们只需要把该文件夹整个复制/拷贝到我们小程序项目中就可以完成安装。

ec-canvas目录下有一个echarts.js，默认文件大小较大，如果我们需要使用从官网自定义构建的方式减小文件大小，选择的ECharts版本一定要和echarts-for-weixin版本相匹配，如：5.1.1。

假设我们需要绘制图表的页面（Page）为 echarts，小程序项目中对应以下四个文件：

echarts.js

echarts.wxml

echarts.wxss

echarts.json

在文件echarts.json中引用声明组件：

ec-canvas为 ECharts 组件名称，/activity/components/ec-canvas/ec-canvas是小程序项目中 ECharts 组件的安装目录。

在文件echarts.wxml中使用组件：

canvas-id是组件ID，必须唯一；ec是组件对象，内部包含组件绘制所需要的数据。

ECharts 组件需要一个组件容器（view），多个组件可以位于同一个组件容器中，必须保证组件初始化（onInit）之前，组件容器是有宽度和高度的；否则，可能导致图表不能正常显示，只显示空白。

在文件echarts.wxss中声明布局样式类：

.ec-container为组件容器使用的样式类，注意组件容器宽高（width）和高度（height）的声明；ec-canvas为组件容器使用的样式类，可以使用宽高（width）和高度（height）设置图表宽高，也可以使用绝对定位（absolute/top/bottom/left/right）的方式设置图表位置和宽高。

在echarts.js中创建和绑定 ECharts 组件对象：

导入 echarts；

(资料图)

ECharts 组件初始化通用函数，我们只需要修改函数中的option中的内容即可。

ECharts 组件初始化，加载图表：

如果不想页面渲染时就加载图表，就需要使用延迟加载，俗称“懒加载”。

id是 ECharts 组件的唯一标识，canvas-id是 ECharts 组件内部画布（Canvas）的唯一标识。

页面渲染时，不直接初始化 ECharts 组件对象，且设置组件启用懒加载；

页面渲染完成后，使用组件ID获取组件实例（lazyComponent），保存至页面（this）实例中。

需要加载图表时，使用组件实例，手动调用初始化方法（init），方法内容与 initChart 相同。为了方便后续操作图表实例（chart），也可以将它保存至页面实例中。

不需要图表时，获取图表实例，销毁图表。

以上就是微信小程序使用ECharts的示例详解的详细内容，更多关于小程序 ECharts的资料请关注软件开发网其它相关文章！