在做小程序的项目过程中，碰到了一个特别奇葩的需求，需要用图表的方式去展示用户的某项数据，数据量用百分比进行表示，最多可以达到100%,在图表显示数据的时候，每个百分比数数据的展示起始位置都不一样，所以我这里第一个想到是canvas，但是canvas实现比较麻烦，进而采用echast

引入

首先在index.json文件中将我们下载下来的图表文件进行引用，做成组件

  "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)
  },
})

坚持努力，无惧未来！