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,typeNum) {
  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","#0000FF","#FFFF00" ]
    var dataList = data;
    var totalNum = typeNum;
    var seriesList = []
    dataList.forEach((item, index) => {
      var obj = {
        value: Math.floor(item.typeNum / 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: {
    ec: {
      lazyLoad: true
    },
    topBarH: app.globalData.CustomBar,
    currentIndex: 0,
    tab: [],
    list: [],
    startTime: '',
    endTime: '',
    page: 1,
    pageSize: 10,
    userInfo:{}
  },

  /**
   * 切换tab
   */
  changeItem: function (params) {
    this.data.currentIndex = params.currentTarget.dataset.index;
    this.data.page = 1;
    this.data.list = [];
    this.setData(this.data);
    this.getList(params.currentTarget.dataset.item.typeId);
  },
  /**
   * 开始时间
   */
  startTimeChange: function (e) {
    this.data.startTime = e.detail.value;
    this.timeGetList();
  },
  /**
   * 开始时间
   */
  endTimeChange: function (e) {
    this.data.endTime = e.detail.value;
    this.timeGetList();
  },
  //时间请求
  timeGetList: function () {
    this.data.page = 1;
    this.data.currentIndex = 0;
    this.data.list = [];
    this.setData(this.data);
    this.getList(this.data.tab[0].typeId);
  },
  /**
   * 获取工作统计类型
   */
  getType: function () {
    app.axios("GET", "app", `/emerEvent/emerCount/`).then(res => {
      if (res.code == 1) {
        console.log(res,'res===>');
        this.data.tab = res.data;
        this.setData(this.data);
        console.log(res.data[0].typeId);
        this.getList(res.data[0].typeId);
        //渲染图标
        let typeNum = 0;
        res.data.forEach(item => {
          typeNum += item.typeNum;
        });
        setTimeout(() => {
          initChart(res.data,typeNum)
        }, 500);
      }
    })
  },
  /**
   * 上拉刷新
   */
  refresh: function () {
    this.data.page = 1;
    this.data.currentIndex = 0;
    this.data.list = [];
    this.setData(this.data);
    this.getList(this.data.tab[0].typeId);
  },
  dropDown: function (params) {
    this.data.page = this.data.page+1;
    this.setData(this.data);
    this.getList(this.data.tab[this.data.currentIndex].typeId);
  },
  /**
   * 获取工作统计每项数据列表
   */
  getList: function (id) {
    let params = {
      limit:this.data.pageSize,
      page:this.data.page,
      endTime:this.data.endTime,
      startTime:this.data.startTime,
      emerTypeId:id,
      userId:this.data.userInfo.userId,
    };
    app.axios("GET", "app", `/emerEvent/userEmerEventPage`, params).then(res => {
      if (res.code == 1) {
        this.data.freshIng = false;
        console.log(res, 'res===>');
        this.data.list = [...this.data.list,...res.data.list];
        this.setData(this.data);
      }
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.data.freshIng = true;
    this.data.userInfo = app.globalData.userInfo;
    this.setData(this.data);
    
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    chart = this.selectComponent('#d-chart')
    this.setData(this.data)
    
    this.getType();
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})