计算属性通过动态判断最小值量级实现自适应单位换算（时/分/秒），封装换算逻辑与标签文案，并生成含格式化数据和单位的响应式对象，同步驱动ECharts配置更新。
计算属性本身不直接“实现”自适应格式化与单位换算，而是作为响应式数据处理的桥梁——它在数据变化时自动重新求值，把原始数值转换成适合图表展示的格式和单位。关键在于：把单位判断逻辑、换算系数、标签文案都封装进计算属性中，并确保它依赖原始数据的最小值或典型值。
基于最小值动态决定单位
图表 y 轴单位（如秒/分/时）应由数据的实际量级决定，而不是写死。计算属性可读取原始 yList 数组，找出最小非零值（或全局最小值），再按阈值划分单位：
- 最小值 ≥ 3600000 ms（1 小时）→ 单位为“时”，数值除以 3600000
- 最小值 ≥ 60000 ms（1 分钟）→ 单位为“分”，数值除以 60000
- 否则 → 单位为“秒”，数值除以 1000（若原始是毫秒）
示例代码（Vue 3 setup）：
const rawYData = ref([12000, 20000, 15000, 8000, 7000, 11000, 13000]) // 毫秒值
const formattedYData = computed(() => {
const minVal = Math.min(...rawYData.value)
let unit = '秒'
let ratio = 1000
if (minVal >= 3600000) {
unit = '时'
ratio = 3600000
} else if (minVal >= 60000) {
unit = '分'
ratio = 60000
}
return {
data: rawYData.value.map(v => parseFloat((v / ratio).toFixed(1))),
unit
}
})
这样，formattedYData.data 可传给 ECharts 的 series.data，formattedYData.unit 用于 yAxis.axisLabel.formatter 或图例说明。
立即学习“前端免费学习笔记（深入）”；
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
同步更新坐标轴配置
ECharts 的 yAxis.label.formatter 不能直接访问 Vue 响应式变量，所以需将单位信息注入 option。推荐方式是用 computed 生成完整 option 对象：
const chartOption = computed(() => ({
yAxis: {
axisLabel: {
formatter: `{value} ${formattedYData.value.unit}`
}
},
series: [{
data: formattedYData.value.data,
type: 'bar'
}]
}))
这样 option 会随 rawYData 或单位规则变化而自动刷新，避免手动调用 setOption。
兼容空数据与边界情况
真实场景中数据可能为空、全零或含负数。计算属性需做防御性处理：
- 空数组时返回默认单位（如“秒”）和空 data 数组
- 全零时保留“秒”，避免除零错误
- 含负数时，用 Math.abs(minVal) 判断量级（单位是标量概念），但显示时保留负号
例如：
const minVal = rawYData.value.length ? Math.min(...rawYData.value.map(Math.abs)) : 0 const baseVal = minVal || 1 // 防止为 0 导致单位误判
配合图表 resize 保持一致性
单位换算只影响数值和标签，不影响图表尺寸适配。但二者常共存：数据变 → 单位变 → 图表重绘；窗口变 → 图表 resize → 视觉重排。确保：
- 计算属性不依赖 window.innerWidth 等非响应式值，避免无法触发更新
- resize 事件只调用 chart.resize()，不修改数据源或单位逻辑
- 若需根据容器宽度动态调整 label 文字大小，另用独立 computed 或 watchEffect 监听 ref 容器宽
