CMVR-IOT-UI/src/views/device/register/components/DexHand/RightTopCharts.vue

<template>
  <div class="right-chart-panel" ref="containerRef">
    <div ref="topChart" class="chart"></div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted, watch } from 'vue';
import * as echarts from 'echarts';


const props = defineProps({
  topSeriesData: {
    type: Array,
    default: () => [0, 0, 0, 0, 0, 0],
    validator: (value) => value.length === 6 && value.every((v) => typeof v === 'number'),
  },
  maxData: {
    type: Object,
    required: true,
    default: () => ({
      thumb: { end: 0, tip: 0, middle: 0, palm: 0 },
      indexFinger: { end: 0, tip: 0, middle: 0 },
      middleFinger: { end: 0, tip: 0, middle: 0 },
      ringFinger: { end: 0, tip: 0, middle: 0 },
      littleFinger: { end: 0, tip: 0, middle: 0 },
      palm: { touch: 0 }
    })
  },
  avgData: {
    type: Object,
    required: true,
    default: () => ({
      thumb: { end: 0, tip: 0, middle: 0, palm: 0 },
      indexFinger: { end: 0, tip: 0, middle: 0 },
      middleFinger: { end: 0, tip: 0, middle: 0 },
      ringFinger: { end: 0, tip: 0, middle: 0 },
      littleFinger: { end: 0, tip: 0, middle: 0 },
      palm: { touch: 0 }
    })
  }
});

const topChart = ref(null);
const containerRef = ref(null); // 新增：引用父容器
let chart1Instance = null;

// 防抖函数
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(null, args), delay);
  };
};

const topChartData = ref({
  xAxis: {
    type: 'category',
    data: ['小拇指', '无名指', '中指', '食指', '大拇指弯曲', '大拇指旋转'],
  },
  yAxis: {
    name: '受力',
    type: 'value',
    min: 0,
    max: 10000,
    interval: 2500,
    axisLine: { show: true, lineStyle: { color: '#1f77b4' } },
    axisLabel: { formatter: '{value} g' },
    axisTick: { show: true },
  },
  series: [{ data: props.topSeriesData, type: 'bar' }],
});

const data = ref({
  resizeObserver: null,
  debouncedResize: null,
});

onMounted(() => {
  try {
    if (!topChart.value) {
      console.error('Chart element is null');
      return;
    }
    chart1Instance = echarts.init(topChart.value);
    chart1Instance.setOption(topChartData.value);

    // 使用 ResizeObserver 监听父容器尺寸变化
    const container = containerRef.value;
    if (container) {
      const resizeObserver = new ResizeObserver(debounce(() => {
        if (chart1Instance) {
          console.log('Container resized:', container.offsetWidth, container.offsetHeight);
          chart1Instance.resize();
        }
      }, 10));
      resizeObserver.observe(container);
      data.value.resizeObserver = resizeObserver;
    } else {
      console.error('Failed to find container for ResizeObserver');
    }

    // 保留 window 的 resize 事件监听
    const debouncedResize = debounce(() => {
      if (chart1Instance) {
        chart1Instance.resize();
      }
    }, 10);
    window.addEventListener('resize', debouncedResize);
    data.value.debouncedResize = debouncedResize;
  } catch (error) {
    console.error('图表初始化失败:', error);
  }
});

onUnmounted(() => {
  // 清理图表实例
  if (chart1Instance) {
    chart1Instance.dispose();
    chart1Instance = null;
  }
  // 清理 ResizeObserver
  if (data.value.resizeObserver) {
    data.value.resizeObserver.disconnect();
    data.value.resizeObserver = null;
  }
  // 清理 window 的 resize 事件
  if (data.value.debouncedResize) {
    window.removeEventListener('resize', data.value.debouncedResize);
    data.value.debouncedResize = null;
  }
});

// 监听 props.topSeriesData
watch(
  () => props.topSeriesData,
  (newTopData) => {
    if (chart1Instance) {
      chart1Instance.setOption({ series: [{ data: newTopData, type: 'bar' }] });
    }
  },
  { immediate: true }
);
</script>

<style scoped>
.right-chart-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 50%;
  padding: 10px;
}
.chart {
  flex: 1;
  height: 100%;
  margin: 10px 0;
  min-height: 200px; /* 确保图表有足够的高度 */
}
</style>