在做小程序的项目过程中，碰到了一个特别奇葩的需求，需要用图表的方式去展示用户的某项数据，数据量用百分比进行表示，最多可以达到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) }, })
