** author by 云千 博客地址:https://www.cnblogs.com/yunqian2017/ **
最近做小程序的时候,需要用到扇形图,记录一下代码的思路
准备
ECharts 和微信小程序官方团队合作,提供了 ECharts 的微信小程序版本
官方文档:https://echarts.apache.org/zh/tutorial.html#在微信小程序中使用 ECharts
下载地址: https://github.com/ecomfe/echarts-for-weixin
示例看官方文档
代码思路
- 图表数据单独放在pages外面
- onload 初始化图表对象, ec设置为延时加载
- pages里面写init(初始化), getData(异步获取数据),getOption(设置图表数据)
代码
wxml
<view class="chart">
<view class="container">
<ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ec}}"></ec-canvas>
</view>
</view>
wxss
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
height: 100%;
}
ec-canvas {
width: 100%;
height: 100%;
}
js
//注意格式,这一行书写不正确可能报 init not define
import * as echarts from ‘../../ec-canvas/echarts‘;
var seriousData = {data:[
{value: 0, name: ‘预算‘},
{value: 0, name: ‘支出‘}
]}
Page({
data: {
ec: {
// onInit: initChart
// 允许延迟加载
lazyLoad: true
}
},
//设置图表的数据
getOption: function () {
var option = {
color: [‘#ffc758‘, ‘#dddddd‘],
tooltip: {
trigger: ‘item‘
},
title: {
x: ‘center‘,
y: ‘center‘,
},
series: [
{
type: ‘pie‘,
radius: [‘40%‘, ‘70%‘],
avoidLabelOverlap: false,
label: {
show: false,
position: ‘center‘
},
emphasis: {
label: {
show: true,
fontSize: ‘40‘,
fontWeight: ‘bold‘
}
},
labelLine: {
show: false
},
data: seriousData.data
}
]
}
return option;
},
//绘制环形图
initChart:function() {
this.barComponent.init((canvas, width, height) => {
// 初始化图表
const Chart = echarts.init(canvas, null, {
width: width,
height: height
});
//获取数据
Chart.setOption(this.getOption());
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return Chart;
});
},
// 获取表格的数据
//自己写
GetChartData: function (uid) {
var that = this
wx.request({
url: ‘ ‘,
method: ‘POST‘,
data: {
},
dataType: ‘json‘,
success(res) {
console.log("获取数据")
console.log(res.statusCode)
// 设置数据显示
if(res.statusCode != 500){
const userData=res.data.data
seriousData.data[0].value=userData.LeftBudget
seriousData.data[1].value=userData.Out
that.initChart()
}
else{
console.log("后端返回异常!")
}
}
})
},
/*生命周期函数--监听页面加载*/
onLoad: function (options) {
//注意mychart-dom-bar是wxml中对应图表的id
this.barComponent = this.selectComponent(‘#mychart-dom-bar‘);
this.GetChartData()
},
/* 生命周期函数--监听页面显示 */
onShow: function () {
},
})
有问题留言,有空会解答