前言
数据统计是我们经常使用的功能&＃xff0c;我们一般在 pc 端使用的比较多&＃xff0c;大多数用在管理系统中统计数据的分析&＃xff0c;最近在做微信小程序的时候也遇到了相同的需求&＃xff0c;把数据统计在小程序端以图表的形式展示&＃xff0c;这里记录下自己的配置使用过程。
准备
首先百度的 echarts 没有提供小程序版本&＃xff0c;这里找了个封装过可以用在微信端的仓库小程序版 echarts,通过这个链接下载最新的包。解压之后有个ec-canvas文件夹就是封装的组件&＃xff0c;放到小程序的组件文件夹目录下&＃xff0c;以供使 用。
├── ec-canvas
│ ├── ec-canvas.js
│ ├── ec-canvas.json
│ ├── ec-canvas.wxml
│ ├── ec-canvas.wxss
│ ├── echarts.min.js
│ └── wx-canvas.js
使用
- 在需要使用的页面配置文件中引入该图表组件
"usingComponents": {"ec-canvas": "../../ec-canvas/ec-canvas"}
- index.wxml 中&＃xff0c;我们创建了一个 组件&＃xff1a;
- 其中 ec 是一个我们在 index.js 中定义的对象&＃xff0c;它使得图表能够在页面加载后被初始化并设置。index.js 的结构如下&＃xff1a;
Page({data: {ec: {onInit: initChart}},onLoad(){// 在需要的地方获取domthis.echartsComponnet1 &＃61; this.selectComponent(&＃39;#mychart-dom-bar1&＃39;)this.init_echarts1({ value: res.data.rotateSpeed || 0, name: &＃39;x1000&＃39; })}// 初始化init_echarts1 (data) {this.echartsComponnet1.init((canvas, width, height) &＃61;> {// 初始化图表const chart &＃61; echarts.init(canvas, null, {width: width,height: height})this.chart &＃61; chart// setGaugeChartOption1获取到基础配置chart.setOption(setGaugeChartOption1(data))// 注意这里一定要返回 chart 实例&＃xff0c;否则会影响事件处理等return chart})},
});
京公网安备 11010802041100号