115 lines
2.7 KiB
Vue
115 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<div class="right-chart-panel">
|
||
|
|
<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);
|
||
|
|
let chart1Instance = null;
|
||
|
|
|
||
|
|
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' }],
|
||
|
|
});
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
try {
|
||
|
|
chart1Instance = echarts.init(topChart.value);
|
||
|
|
chart1Instance.setOption(topChartData.value);
|
||
|
|
|
||
|
|
// 处理窗口大小变化
|
||
|
|
const handleResize = () => {
|
||
|
|
chart1Instance?.resize();
|
||
|
|
};
|
||
|
|
window.addEventListener('resize', handleResize);
|
||
|
|
} catch (error) {
|
||
|
|
console.error('图表初始化失败:', error);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
onUnmounted(() => {
|
||
|
|
// 清理图表实例和事件监听器
|
||
|
|
chart1Instance?.dispose();
|
||
|
|
window.removeEventListener('resize', () => {
|
||
|
|
chart1Instance?.resize();
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 监听 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>
|