health.applet/miniprogram/module/charts/record-index/record-index.ts

import * as echarts from '../ec-canvas/echarts.min';
import { healthIndexReportMethod } from './request';

// module/health/pages/record-index/record-index.ts
Component({
  lifetimes: {
    attached() {
      this._initRect();
      this._getData();
    }
  },
  properties: {

  },
  data: {
    gap: 0,
    scale: 1,
    rect: { width: 0, height: 0 },

    charts: [] as string[],
  },
  methods: {
    _initRect() {
      const { windowWidth, pixelRatio } = wx.getWindowInfo()
      const { right } = wx.getMenuButtonBoundingClientRect();
      const gap = windowWidth - right;

      const width = windowWidth - gap * 2;
      const height = Math.floor(width * 3 / 4);
      this.setData({
        rect: { width, height, },
        scale: pixelRatio, gap
      })
    },
    async _getData() {
      const charts = await healthIndexReportMethod();
      this.setData({
        charts: charts.map((option: any) => {
          return {
            id: option.id,
            onInit(canvas: any, width: number, height: number, dpr: number) {
              const ec = echarts.init(canvas, null, {
                width: width,
                height: height,
                devicePixelRatio: dpr
              });
              canvas.setChart(ec);
              ec.setOption(option);

              return ec;
            }
          }
        })
      });
    },
  }
})