Inspection/weapp/package/riskManagement/riskManagement.js

// package/riskManagement/riskManagement.js
import * as echarts from '../components/ec-canvas/echarts';
import { Request } from "../../common";
import { getPatrolRecordStatistic } from '../../utils/getApiUrl';
import moment from '../../utils/moment';

function setOption(chart, data) {
  const option = {
    grid: {
      top: '5%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: data.map(d => d.month),
      boundaryGap: false,
      axisLabel: {
        formatter: (value) => {
          const temp = value.split('-');
          return + temp[1] + '月' + '\n ' + temp[0];
        }
      },
    },
    yAxis: {
      type: 'value',
      splitLine: {    // 网格线
        lineStyle: {
          type: 'dashed'
        },
      }
    },
    series: [
      {
        data: data.map(d => d.count),
        type: 'line',
        symbol: 'circle',
        symbolSize: 5,
        itemStyle: {
          normal: {
            color: '#008AFF',
            lineStyle: {
              color: '#008AFF',
            }
          }
        },
      }
    ]
  };
  chart.setOption(option);
}

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      // onInit: initChart,
      lazyLoad: true, // 将 lazyLoad 设为 true 后，需要手动初始化图表
    },
    isLoaded: false,
    list: [1, 2, 3, 4],
    monthAlarmCount: 0,
    monthHandleCount: 0,
    historyTrend: [],
    monthDeviceRank: [],
    monthDeviceScoreRank: [],
  },

  // 初始化图表
  initChart: function (data) {
    this.ecComponent.init((canvas, width, height, dpr) => {
      // 获取组件的 canvas、width、height 后的回调函数
      // 在这里初始化图表
      const chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr // new
      });
      setOption(chart, data);

      // 将图表实例绑定到 this 上，可以在其他成员函数中访问
      this.chart = chart;

      this.setData({
        isLoaded: true,
      });

      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
      return chart;
    });
  },

  toCalendar() {
    wx.navigateTo({
      url: '/package/riskManagement/riskCalendar/riskCalendar',
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    const userInfo = wx.getStorageSync("userInfo");
    // 请求数据
    wx.showLoading()
    Request.get(getPatrolRecordStatistic(userInfo.structure.join())).then(res => {
      wx.hideLoading()
      let historyTrend = new Array(12)
      for (let i = 11; i >= 0; i--) {
        const month = moment().subtract(i, 'month').format('YYYY-MM')
        historyTrend[11 - i] = {
          month: month,
          count: res.historyTrend?.find(h => h.month === month)?.count || 0,
        }
      }
      const monthDeviceRank = [...res.monthDeviceAlarm]
        .sort((a, b) => b.abnormalCount - a.abnormalCount)
        .map(d => ({ ...d, itemsCount: d.itemsCount.sort((a, b) => b.count - a.count) }))
      this.setData({
        monthAlarmCount: res.monthAlarmCount,
        monthHandleCount: res.monthHandleCount,
        historyTrend,
        monthDeviceRank: monthDeviceRank,
        monthDeviceScoreRank: [...res.monthDeviceAlarm].sort((a, b) => b.abnormalScore - a.abnormalScore),
      })
      this.initChart(historyTrend)
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {
    this.ecComponent = this.selectComponent('#risk-trend-chart-dom');
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})