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

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

echarts.registerTheme(...Theme);

// module/health/pages/record-index/record-index.ts
Component({
  lifetimes: {
    async attached() {
      try {
        await this._initRect();
        await this._getData();
      } catch (error) {
        console.error('record-index component error:', error);
      }
    },
    detached() {
      // 清理图表实例
      if (this.data.charts) {
        this.data.charts.forEach((chart: any) => {
          if (chart && chart.dispose) {
            chart.dispose();
          }
        });
      }
    }
  },
  properties: {

  },
  data: {
    gap: 0,
    scale: 1,
    rect: { width: 0, height: 0 },
    charts: [] as string[],
    loading: true,
    error: false
  },
  methods: {
    async _initRect() {
      try {
        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
        });
      } catch (error) {
        console.error('_initRect error:', error);
        throw error;
      }
    },
    async _getData() {
      try {
        this.setData({ loading: true, error: false });
        const charts = await healthIndexReportMethod();
        
        if (!charts || charts.length === 0) {
          this.setData({ loading: false, error: true });
          return;
        }

        const chartConfigs = charts.map((option: any) => {
          return {
            id: option.id,
            onInit(canvas: any, width: number, height: number, dpr: number) {
              const ec = echarts.init(canvas, Theme[0], {
                width: width,
                height: height,
                devicePixelRatio: dpr
              });
              canvas.setChart(ec);
              ec.setOption(option);
              return ec;
            }
          }
        });

        this.setData({
          charts: chartConfigs,
          loading: false
        });
      } catch (error) {
        console.error('_getData error:', error);
        this.setData({ loading: false, error: true });
      }
    }
  }
})