mom-wx/pages/index/index.js

import * as echarts from '../../ec-canvas/echarts';
const {
  windowWidth
} = wx.getSystemInfoSync()
const vw = windowWidth / 100

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

  var option = {
    title: {
      y: 'center',
      left: '55%',
      text: `{dot1|●} {name|合格数} ：{value|${1000}}\n\n\n{dot2|●} {name|不合格数} ：{value|${100}}`,
      textStyle: {
        color: '#666',
        rich: {
          dot1: {
            fontSize: 2 * vw,
            color: '#666',
          },
          dot2: {
            fontSize: 2 * vw,
            color: '#666',
          },
          name: {
            color: '#666',
            fontSize: 4 * vw,
          },
          value: {
            color: '#666',
            fontSize: 4.4 * vw,
            fontWeight: '800',
          }
        }
      }
    },
    series: [{
        type: "pie",
        center: ["30%", "50%"],
        radius: ['67%', '73%'],
        itemStyle: {
          color: '#0004'
        },
        labelLine: {
          show: false
        },
        data: [1]
      },
      {
        type: "pie",
        label: {
          show: false,
        },
        center: ["30%", "50%"],
        radius: ['64%', '76%'],
        clockwise: false,
        labelLine: {
          show: false
        },
        itemStyle: {
          color: '#4E97FF'
        },
        data: [{
            value: 100,
            name: '不合格数',
            itemStyle: {
              color: '#4E97FF',
              borderColor: '#000',
              borderWidth: 2
            },
          },
          {
            value: 1000,
            name: '合格数',
            itemStyle: {
              color: '#0000',
            },
          },
        ]
      },
    ]
  };
  chart.setOption(option);
  return chart;
}

function initChart1(canvas, width, height, dpr) {
  const chart = echarts.init(canvas, null, {
    width: width,
    height: height,
    devicePixelRatio: dpr // 像素比
  });
  canvas.setChart(chart);

  var option = {
    radar: {
      center: ["30%", "50%"],
      radius: '40%',
      shape: 'circle',
      splitNumber: 1,
      splitLine: {
        lineStyle: {
          color: '#0009',
          width: 1
        }
      },
      splitArea: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisNameGap: 3,
      axisName: {
        rotation: 90,
        rotate: 90,
        fontSize: 8,
        color: '#333',
      },
      indicator: [{
          name: '产品1',
          max: 100
        },
        {
          name: '产品2',
          max: 100
        },
        {
          name: '产品3',
          max: 100
        },
        {
          name: '产品4',
          max: 100
        },
        {
          name: '产品5',
          max: 100
        },
        {
          name: '产品6',
          max: 100
        },
      ],

    },
    series: [{
      name: ' ',
      type: 'radar',
      symbolSize: 3,
      itemStyle: {
        color: '#666'
      },
      lineStyle: {
        color: '#0003',
        width: 1,
      },
      data: [{
        value: [
          99, 98, 94, 95, 93, 98
        ],
        name: 'Allocated Budget',
        areaStyle: {
          color: {
            type: 'radial',
            x: 0.5,
            y: 0.5,
            r: 0.5,
            colorStops: [{
                offset: 0,
                color: '#fff0'
              },
              {
                offset: 1,
                color: '#4C92F266'
              }
            ]
          },
        }
      }]
    }]
  };
  chart.setOption(option);
  return chart;
}
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ec: {
      onInit: initChart
    },
    ec1: {
      onInit: initChart1
    },
    table: [{
        value1: "112WD",
        value2: 487,
        value3: 256,
        value4: 231,
        value5: "53%"
      },
      {
        value1: "112DS",
        value2: 198,
        value3: 98,
        value4: 100,
        value5: "49%"
      },
      {
        value1: "112HS",
        value2: 312,
        value3: 295,
        value4: 17,
        value5: "95%"
      },
      {
        value1: "112GO",
        value2: 520,
        value3: 410,
        value4: 110,
        value5: "79%"
      },
      {
        value1: "112HW",
        value2: 403,
        value3: 333,
        value4: 70,
        value5: "83%"
      },
      {
        value1: "112KD",
        value2: 287,
        value3: 167,
        value4: 120,
        value5: "58%"
      },
      {
        value1: "112ON",
        value2: 450,
        value3: 390,
        value4: 60,
        value5: "87%"
      },
      {
        value1: "112NE",
        value2: 199,
        value3: 120,
        value4: 79,
        value5: "60%"
      },
      {
        value1: "112KW",
        value2: 520,
        value3: 520,
        value4: 0,
        value5: "100%"
      },
      {
        value1: "112OB",
        value2: 365,
        value3: 280,
        value4: 85,
        value5: "77%"
      }
    ]
  },

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

  },

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

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {
    const tabBar = this.getTabBar?.()
    if (tabBar) {
      tabBar.setData({
        nowPage: getCurrentPages().at(-1)?.route
      })
    }
  },

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

  },

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

  },

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

  },

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

  },

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

  }
})