daofu-applet/pages/statistic/y-j/index/index.js

// 应急统计
const app = getApp();
import * as echarts from '../../../../ec-canvas/echarts';
let chart = null;

/**
 * 获取像素比
 */
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);

    var colorList = ["#FF9C00", "#FF4E00", ]
    var dataList = [data.resolving, data.unresolved];
    var totalNum = 10;
    var seriesList = []
    dataList.forEach((item, index) => {
      var obj = {
        value: Math.floor(item / totalNum * 100),
      }
      seriesList.push({
        type: 'bar',
        data: [obj],
        stack: 'one',
        roundCap: true,
        coordinateSystem: 'polar',
        itemStyle: {
          normal: {
            color: colorList[index],
            borderWidth: 2,
            borderColor: colorList[index]
          }
        },
      })
    })
    const option = {
      title: [{
        text: '{num|' + (totalNum < 0 ? 0 : totalNum) + '}',
        x: '48%',
        y: '35%',
        textAlign: 'center',
        textStyle: {
          rich: {
            num: {
              fontSize: 28,
              fontWeight: 'bold',
              lineHeight: 40,
              color: '#000000'
            },

          }
        },
      }],
      grid: {
        bottom: '0%'
      },
      angleAxis: {
        max: 100,
        clockwise: true, // 逆时针
        show: false
      },
      radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
          show: false,
        },
        axisLine: {
          show: false,

        },
        axisTick: {
          show: false
        },
      },
      polar: {
        center: ['50%', '50%'],
        radius: ['70%', '90%'],
      },
      series: seriesList
    };

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

Page({

  /**
   * 页面的初始数据
   */
  data: {
    topBarH: app.globalData.CustomBar,
    ec: {
      lazyLoad: true
    },
    currentIndex: 0,
    tab: [{
      label: '已办事项',
      val: 8
    }, {
      label: '待办事项',
      val: 2
    }],
  },

  /**
   * 切换tab
   */
  changeItem: function (params) {
    this.data.currentIndex = params.currentTarget.dataset.index;
    this.setData(this.data)
  },

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

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

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})