esswisdom_wx/pages/monitorevent/index.js

// pages/monitorevent/index.js
import * as echarts from '../../ec-canvas/echarts';

Page({

  /**
   * 页面的初始数据
   */
  data: {
// 状态栏高度
statusBarHeight: wx.getStorageSync('statusBarHeight'),
// 导航栏高度
navBarHeight: wx.getStorageSync('navBarHeight'),

// 导航栏和状态栏高度
navStatusBarHeight: wx.getStorageSync('navStatusBarHeight'),

// 胶囊
menu:wx.getStorageSync('menu'),
pieleft: {
  onInit: initChart
},
pieright: {
  onInit: initChartright
}
  },

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

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

function initChart(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    legend: {
      left: 'center',  // 图例水平居中
      bottom: 0
    },
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [{
        value: 20,
        name: '已结束'
      }, {
        value: 80,
        name: '发生中'
      }
    ]
    }]
  };

  chart.setOption(option);
  return chart;
}

function initChartright(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // new
  });
  canvas.setChart(chart);

  var option = {
    backgroundColor: "#ffffff",
    legend:[ {
      left: '40',  // 图例水平居中
      bottom: 20,
      data:[
        {name: '未分级'},
        {name: '预警'}
      ]
    },{
      left: '40',  // 图例水平居中
      bottom: 0,
      data:[
        {name: '告警'},
        {name: '故障'}
      ]
    }],
    tooltip: {
      trigger: 'item'
    },
    series: [{
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 40,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [{
        value: 20,
        name: '未分级'
      }, {
        value: 80,
        name: '预警'
      }, {
        value: 80,
        name: '告警'
      }, {
        value: 80,
        name: '故障'
      }
    ]
    }]
  };

  chart.setOption(option);
  return chart;
}