fix(charts): 回测结果5图canvas宽度仅100px被压扁
根因: useChart 在 onMounted 调 echarts.init 时, 容器(在 el-tab-pane 内)尚未拿到 真实宽度 → canvas 用默认 100px; 且 setOption 后从不 resize, 数据异步到达后 canvas 仍停在初始窄宽 → 5 条曲线全被压成窄条。 修复(useChart 一处, 全部图表受益): - setOption 后调 chart.resize() (数据到达时容器已布局, 同步真实宽度) - 加 ResizeObserver 监听容器尺寸变化 (兼容 init 偏早 / tab 切换 / 窗口缩放) - ensureChart() 懒初始化兜底 验证: canvas 宽 100→830px(满宽), 5 图横向铺满曲线正常
This commit is contained in:
@@ -4,9 +4,18 @@ import * as echarts from 'echarts'
|
||||
|
||||
export function useChart(el: Ref<HTMLDivElement | undefined>) {
|
||||
let chart: echarts.ECharts | null = null
|
||||
let ro: ResizeObserver | null = null
|
||||
|
||||
function ensureChart(): void {
|
||||
if (!chart && el.value) chart = echarts.init(el.value)
|
||||
}
|
||||
|
||||
function setOption(option: echarts.EChartsCoreOption): void {
|
||||
ensureChart()
|
||||
chart?.setOption(option, true)
|
||||
// 数据通常在容器布局完成后才到(父组件异步拉取),此处同步一次尺寸,
|
||||
// 避免 canvas 停在 init 时的窄宽(tab/初始化偏早导致)。
|
||||
chart?.resize()
|
||||
}
|
||||
|
||||
function resize(): void {
|
||||
@@ -14,12 +23,18 @@ export function useChart(el: Ref<HTMLDivElement | undefined>) {
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (el.value) chart = echarts.init(el.value)
|
||||
ensureChart()
|
||||
// ResizeObserver: 容器拿到真实宽度 / tab 切换 / 窗口变化时自动 resize
|
||||
if (el.value && typeof ResizeObserver !== 'undefined') {
|
||||
ro = new ResizeObserver(() => chart?.resize())
|
||||
ro.observe(el.value)
|
||||
}
|
||||
window.addEventListener('resize', resize)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', resize)
|
||||
ro?.disconnect()
|
||||
chart?.dispose()
|
||||
chart = null
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user