daofu-applet/pages/g-z-t/d-b-s-x/detail/index.js

// pages/task/check/index/index.js
import * as echarts from '../../../../ec-canvas/echarts';
let chart = null;
const app = getApp()

/**
 * 获取像素比
 */
const getPixelRatio = () => {
  let pixelRatio = 0
  wx.getSystemInfo({
    success: function (res) {
      pixelRatio = res.pixelRatio
    },
    fail: function () {
      pixelRatio = 0
    }
  })
  return pixelRatio
}

/**
 * 设置echarts
 */
function initChart(data) {
  if (chart == null) return
  chart.init((canvas, width, height) => {
    var dpr = getPixelRatio();
    const chart = echarts.init(canvas, null, {
      width: width,
      height: height,
      devicePixelRatio: dpr
    });
    canvas.setChart(chart);

    const option = {
      angleAxis: {
        show: false,
        max: (100 * 360) / 180, //-45度到225度，二者偏移值是270度除360度
        type: "value",
        startAngle: 180, //极坐标初始角度
        splitLine: {
          show: false,
        },
      },
      barMaxWidth: 10, //圆环宽度
      radiusAxis: {
        show: false,
        type: "category",
      },
      //圆环位置和大小
      polar: {
        center: ["50%", "80%"],
        radius: "250%",
      },

      series: [{
          type: "bar",
          data: [{
            //上层圆环，显示数据
            value: 50,
            itemStyle: {
              color: "#0062FF",
            },
          }, ],
          barGap: "-100%", //柱间距离,上下两层圆环重合
          coordinateSystem: "polar",
          roundCap: true, //顶端圆角
          z: 3, //圆环层级，同zindex
        },
        {
          //下层圆环，显示最大值
          type: "bar",
          data: [{
            value: 100,
            itemStyle: {
              color: "#EBEDF0",
              borderWidth: 0,
            },
          }, ],
          barGap: "-100%",
          coordinateSystem: "polar",
          roundCap: true,
          z: 1,
        },
        //仪表盘
        {
          type: "gauge",
          axisLine: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLabel: {
            show: false,
          },
          pointer: false,
          detail: {
            formatter: function () {
              return `{number|${50 + "%\n"}}{wcl|完成进度}`;
            },
            rich: {
              number: {
                fontSize: 18,
                textAlign: "center",
                color: "#202229",
                fontWeight: "bolder",
              },
              wcl: {
                fontSize: 12,
                textAlign: "center",
                color: "#606977",
              },
            },
            color: "#fff",
            offsetCenter: ["0", "20"],
          },
          title: {
            show: false,
          },
          data: [{
            value: 50,
          }, ],
        },
      ],
    };

    chart.clear();
    chart.setOption(option);
    return chart;
  })
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    topBarH: app.globalData.CustomBar,
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    chart = this.selectComponent('#d-chart')
    initChart({})
    this.setData(this.data)
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})