首先,如果是未使用过 echarts 或对其不熟悉的开发者,建议先看看 echarts 的 官方文档,主要对 echarts 的配置项和 api 的作用有个基本了解。
其次,echarts 在网页中的使用和在小程序中的使用略有差别,此处有一个不错的 demo,可作为参考。不过这个 demo 的问题在于数据是初始化时直接写入的固定数据,而我们在实际开发中必须先请求接口、获取数据,再初始化图表;如果在这个页面中有相关操作会改变页面数据,必须重新初始化图表才会使其刷新。最后得到效果图如下:
在我的相关项目中,代码如下:
<view class='container'>
<ec-canvas wx:if="{{visible}}" id="mychart-dom-pie" canvas-id="mychart-pie" ec="{{ ec }}"></ec-canvas>
</view>
import * as echarts from '../../../../ec-canvas/echarts';
const util = require('../../../../utils/util.js');
let colorData = [],
legendData = [],
seriesData = [];
let chart = null;//拿出来作为全局变量
// 此函数控制图表的属性、参数等,改变其中参数,会让图表刷新
function setOption(chart) {
let option = {
backgroundColor: "#ffffff",
color: colorData,
legend: { // 标注
left: 'left',
bottom: 'bottom',
data: legendData,
textStyle: {
fontSize: 13
}
},
tooltip: {
show: true,
trigger: 'item',
formatter: "{b} \n {c} : {d}%"
},
series: [{
label: {
normal: {
fontSize: 13
}
},
name: '利润比例',
type: 'pie',
center: ['50%', '50%'],
radius: [0, '70%'],
data: seriesData,
itemStyle: {
normal: {
label: {
show: false //隐藏标示文字
},
labelLine: {
show: false //隐藏标示线
}
},
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 2, 2, 0.3)'
}
}
}]
};
chart.setOption(option);
}
Page({
data: {
ec: {
lazyLoad: true // 延时加载
},
visible: true,
ecComponent: ''
},
onLoad(options) {
this.getDataByType()
},
onReady() {
// 获取组件
this.ecComponent = this.selectComponent('#mychart-dom-pie');
},
getDataByType() {
let { Date1 = '', Date2 = '', DepartId = '', BuyerId = '', Ywy = '', OperatorId = '', ResoureTypeId = '' } = this.data;
let param = {
Date1, //开始日期[必要]
Date2, //结束日期[必要]
DepartId, //部门Id[非必要]
BuyerId, //客户Id[非必要]
Ywy, //业务员Id[非必要]
OperatorId, //计调Id[非必要]
ResoureTypeId //资源类型Id[必要]2:酒店,(3,4):导服,3:国内导服,4:国际导服,5:其它业务
}
util.TC._postAjaxPro('Stat/Profit.aspx', {
UserId: wx.getStorageSync('LOGIN_DATA').UserId,
ComId: wx.getStorageSync('LOGIN_DATA').ComId,
Action: 'StatByOperator',
Param: JSON.stringify(param)
})
.then((res) => {
this.setData({
detailData: res.Data
}, () => {
this.setPieChart()
})
})
.catch((err) => {
util.TC._toast(err.data.Msg, 'none')
})
},
// 通过计算得到图表需要的数据,作为参数传入
setPieChart() {
let { detailData } = this.data
for (let item of detailData) {
let name = 'T_OperatorId'
let value = 'Profit'
legendData.push(item[name])
seriesData.push({
value: item[value],
name: item[name]
})
colorData.push(this.setColor())
}
this.init()
},
// 初始化图表,第一次加载时必须有这一步,但后面如果数据发生改变,只改变 setOption() 函数就可刷新图表,因为图表的属性参数等都在其中控制
init() {
this.ecComponent.init((canvas, width, height) => {
// 获取组件的 canvas、width、height 后的回调函数
// 在这里初始化图表
const chart = echarts.init(canvas, null, {
width: width,
height: height
});
setOption(chart);
// 将图表实例绑定到 this 上,可以在其他成员函数(如 dispose)中访问
this.chart = chart;
this.setData({
visible: true
});
// 注意这里一定要返回 chart 实例,否则会影响事件处理等
return chart;
});
},
// 生成随机颜色
setColor() {
let colorValue = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
let colorArray = colorValue.split(',')
let color = "#";
for (let i = 0; i < 6; i++) {
color += colorArray[Math.floor(Math.random() * 16)];
}
return color;
}
})
在以上 js 代码中,有很多的注释,思路也在其中。在此总结一下就是:初始时设置 lazyload 延时加载,在 onReady 中绑定到 ec-canvas 组件上,在 onLoad 中调用相关函数请求数据,请求到数据后调用处理数据函数得到图表 options 中需要的参数数据,调用 init() 初始化图表。如果还有改变数据的操作,改变数据后调用 setOptions() 函数或重新 init() 初始化都和刷新图表,over。