微信小程序绘制echart饼图
问题背景
小程序开发过程经常会使用到画图表的场景,本文将介绍微信小程序开发过程如何使用Echarts组件绘制饼图。
问题分析
GitHub地址: https://github.com/ecomfe/echarts-for-weixin
该项目是 Apache ECharts (incubating) 的微信小程序版本,开发者可以通过熟悉的 ECharts 配置方式,快速开发图表,满足各种可视化需求。
问题解决
(1)下载GitHub仓项目,拷贝 ec-canvas 目录到我们自己项目中。
(2)需要引入的页面json文件引入该组件。
"usingComponents": {
"custom-tab-bar": "/custom-tab-bar",
"ec-canvas": "../../component/ec-canvas/ec-canvas"
},
"navigationBarTitleText": "分类列表",
"navigationStyle": "custom",
"enablePullDownRefresh": true
}
(3)需要使用的页面wxml文件中,使用该组件
<ec-canvas force-use-old-canvas="true" type="2d" style="width: 300rpx; height: 300rpx;" id="mychart-pie" ec="{{ ec }}">
</ec-canvas>
(4)页面对应js文件中,import ec-canvas组件并进行初始化和数据赋值。
import * as echarts from '../../component/ec-canvas/echarts';
const util = require('../../utils/util')
const app = getApp();
// pages/healdata/healthydata.ts
Page({
/**
* 页面的初始数据
*/
data: {
...
ec: {
lazyLoad: true
},
tagList: [{
value: 55,
}, {
value: 20,
}, {
value: 10,
}, {
value: 20,
}, {
value: 38,
}]
,
...
},
onLoad: function () {
...
this.echartsComponnet = this.selectComponent('#mychart-pie');
},
//初始化图表
init_echarts() {
if (this.echartsComponnet) {
console.log('init_echarts this.echartsComponnet')
this.echartsComponnet.init((canvas, width, height, dpr) => {
// 初始化图表
let chart = echarts.init(canvas, null, {
width: width,
height: height,
devicePixelRatio: dpr
});
this.setOption(chart);
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return chart;
});
}
},
setOption: function (Chart) {
Chart.clear(); // 清除
Chart.setOption(this.getOption()); //获取新数据
},
getOption: function () {
var that = this;
var option = {
// title: {
// text: '存量客户分布',
// x: 'center',
// textStyle: {
// fontSize: 14,
// fontWeight: 'normal',
// },
// },
tooltip: {
show: true,
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable: true,
// legend: {
// bottom: 0,
// data: that.data.tagList,
// icon: 'circle',
// itemWidth: 10,
// itemHeight: 10
// },
color: ["#108ee9", "#ff9900", "#10cfc8"],
series: [{
type: 'pie',
tooltip: {
trigger: 'item',
triggerOn: 'click',
formatter: "{c} ({d}%)"
},
center: ['50%', '45%'],
radius: ['50%', '90%'],
data: that.data.tagList,
itemStyle: {
normal: {
label: {
show: true,
position: 'inner',
formatter: "{d}%"
},
labelLine: {
show: false
}
},
},
}]
};
return option;
},
})
运行结果如下所示:
问题总结
本文初步介绍了微信小程序开发过程如何使用Echarts组件绘制饼图,有兴趣的同学可以进一步深入研究。