在做小程序的项目过程中,碰到了一个特别奇葩的需求,需要用图表的方式去展示用户的某项数据,数据量用百分比进行表示,最多可以达到100%,在图表显示数据的时候,每个百分比数数据的展示起始位置都不一样,所以我这里第一个想到是canvas,但是canvas实现比较麻烦,进而采用echast
引入
"usingComponents": { "ec-canvas": "../../ec-canvas/ec-canvas" },
页面结构
把组件放到页面中,接收一个ec的配置项
<view class="my_accuracy_left"> <ec-canvas ec="{{ ec }}"></ec-canvas> </view>
样式
我们这里设置好样式,将承载ec-canvas
组件的盒子设置好宽高后,再将组件宽和高设置为100%
.my_accuracy .my_accuracy_left { width: 242rpx; height: 242rpx; } ec-canvas { width: 100%; height: 100%; }
我们这里导入ehcarts
,声明一个全局对象echast1
,默认值为null
,在data
对象中声明一个ec
对象,这个是echarts图表对象的配置项,我们对里面的onInit
方法进行编写,并将使用到的数据以入参的方式传递进去,将创建好的图表对象赋值给全局变量echast1
,最后返回给组件的配置项,在声明一个angleCount
方法对于起始位置进行计算,声明一个setEchastConfig
方法,是对当前图表进行配置的,接受一个参数num
,是我们当前数据的百分比,在setEchastConfig
方法中使用angleCount
方法得出当前的图表的起始位置,最后进行设置上,最后页面就会展示
import * as echarts from '../../ec-canvas/echarts'; // echast对象 var echast1 = null; Page({ data: { // echast配置 ec: { onInit: function (canvas, width, height, dpr) { echast1 = echarts.init(canvas, null, { width: width, height: height, devicePixelRatio: dpr }); canvas.setChart(echast1); return echast1; }, }, }, /** * @function 对echast进行配置 * @param num 百分比 */ setEchastConfig(num) { // 计算角度 let deg = this.angleCount(num); var option = { title: [{ text: `${num}%`, x: 'center', top: 'center', textStyle: { fontSize: '16', color: '#FF841A' }, }], polar: { radius: ['42%', '52%'], center: ['50%', '50%'], }, angleAxis: { max: 100, startAngle: deg, show: false, }, radiusAxis: { type: 'category', show: true, axisLabel: { show: false, }, axisLine: { show: false, }, axisTick: { show: false, }, }, series: [{ name: '', type: 'bar', roundCap: true, barWidth: 90, showBackground: true, backgroundStyle: { color: '#FFDABA', }, data: [num], coordinateSystem: 'polar', itemStyle: { normal: { color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: '#FF841A', }, ]), }, }, }, ], }; echast1.setOption(option); }, /** * @function 计算当前echast的角度 */ angleCount(num) { //360度为一个圆,我们这里起始位置只会在右半圆,所以是180度,然后180按照100进行平分,在拿每份的平分数乘以当前的角度,减去90度是为了确定是在上半圆还是下半圆,最后将计算出来的角度返回出去即可 let res = (180 / 100 * num) - 90; return res; }, /** * 生命周期函数--监听页面显示 */ onShow() { //这里对于图表的更新需要放到页面显示后,并且需要等到`echast1`有值后我们才可以进行设置,由于小程序没有数据侦听器,所以我们使用定时器的方式做一个延时的效果,等到`echast1`有值后调用对图表的配置 setTimeout(() => { this.setEchastConfig(90) }, 300) }, })