新余专业的企业网站建设公司,公司门户网站建设公司,做网站ps的图片,服装设计自学目录
安装 ECharts 组件使用 ECharts 组件图表延迟加载
echarts-for-weixin 是 ECharts 官方维护的一个开源项目#xff0c;提供了一个微信小程序组件#xff08;Component#xff09;#xff0c;我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表。
echarts-fo…目录
安装 ECharts 组件使用 ECharts 组件图表延迟加载
echarts-for-weixin 是 ECharts 官方维护的一个开源项目提供了一个微信小程序组件Component我们可以通过这个组件在微信小程序中使用 ECharts 绘制图表。
echarts-for-weixin 自身包含很多使用示例方便我们参考。 安装 ECharts 组件
克隆项目
? 1 git clone https://github.com/ecomfe/echarts-for-weixin.git
切换版本
? 1 git checkout v2.0.0
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。 使用 ECharts 组件
假设我们需要绘制图表的页面Page为 echarts小程序项目中对应以下四个文件
echarts.jsecharts.wxmlecharts.wxssecharts.json
在文件 echarts.json 中引用声明组件
{usingComponents: {ec-canvas: /activity/components/ec-canvas/ec-canvas}
}ec-canvas 为 ECharts 组件名称/activity/components/ec-canvas/ec-canvas 是小程序项目中 ECharts 组件的安装目录。
在文件 echarts.wxml 中使用组件
? 1 2 3 view classec-container ec-canvas canvas-idechart-pie ec{{ec}}/ec-canvas /view
canvas-id 是组件ID必须唯一ec 是组件对象内部包含组件绘制所需要的数据。
ECharts 组件需要一个组件容器view多个组件可以位于同一个组件容器中必须保证组件初始化onInit之前组件容器是有宽度和高度的否则可能导致图表不能正常显示只显示空白。
在文件 echarts.wxss 中声明布局样式类
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 .ec-container { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100vw; height: 100vh; } ec-canvas { width: 100%; height: 100%; }
.ec-container 为组件容器使用的样式类注意组件容器宽高width和高度height的声明ec-canvas 为组件容器使用的样式类可以使用宽高width和高度height设置图表宽高也可以使用绝对定位absolute/top/bottom/left/right的方式设置图表位置和宽高。
在 echarts.js 中创建和绑定 ECharts 组件对象
? 1 import * as echarts from ../../components/ec-canvas/echarts
导入 echarts
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 function initChart(canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); canvas.setChart(chart); var option { backgroundColor: #ffffff, series: [{ label: { normal: { fontSize: 14 } }, type: pie, center: [50%, 50%], radius: [20%, 40%], data: [{ value: 55, name: 北京 }, { value: 20, name: 武汉 }, { value: 10, name: 杭州 }, { value: 20, name: 广州 }, { value: 38, name: 上海 }] }] }; chart.setOption(option); return chart; }
ECharts 组件初始化 通用 函数我们只需要修改函数中的 option 中的内容即可。
? 1 2 3 4 5 6 7 Page({ data: { ec: { onInit: initChart } } })
ECharts 组件初始化加载图表 图表延迟加载
如果不想页面渲染时就加载图表就需要使用延迟加载俗称“懒加载”。
? 1 2 3 view classec-container ec-canvas idlazy-echart-pie canvas-idlazy-canvas-pie ec{{lazyEc}}/ec-canvas /view
id 是 ECharts 组件的唯一标识canvas-id 是 ECharts 组件内部画布Canvas的唯一标识。
? 1 2 3 4 5 6 7 Page({ data: { lazyEc: { lazyLoad: true } } })
页面渲染时不直接初始化 ECharts 组件对象且设置组件启用懒加载
? 1 this.lazyComponent this.selectComponent(#lazy-echart-pie)
页面渲染完成后使用组件ID获取组件实例lazyComponent保存至页面this实例中。
? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 this.lazyComponent.init((canvas, width, height, dpr) { const chart echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); canvas.setChart(chart); this.lazyChart chart; var option { ... }; chart.setOption(option); return chart; });
需要加载图表时使用组件实例手动 调用初始化方法init方法内容与 initChart 相同。为了方便后续操作图表实例chart也可以将它保存至页面实例中。
? 1 this.lazyChart.dispose();
不需要图表时获取图表实例销毁图表。
