refactor(waveform): 优化波形趋势图表交互功能
- 添加了 canResetTrendChart 计算属性用于判断是否可以重置图表 - 更新了工具栏状态控制逻辑,禁用状态下禁止重置操作 - 调整了图表边距配置,右侧留白从 18px 增加到 36px - 时间轴底部留白从 30px 调整为 34px - 时间轴标签间距从 6 调整为 8 - 集成了 ECharts 工具箱的数据缩放功能 - 替换了图标组件,使用箭头图标替代缩放图标 - 调整了工具栏项目顺序,将平移工具移到最后
This commit is contained in:
@@ -351,13 +351,23 @@ const canPanTrendChart = computed(() => {
|
||||
return hasWaveformData.value && (start > 0 || end < 100)
|
||||
})
|
||||
|
||||
const canResetTrendChart = computed(() => {
|
||||
const { start, end } = trendXZoomRange.value
|
||||
|
||||
return (
|
||||
hasWaveformData.value &&
|
||||
(start > 0 || end < 100 || trendYZoomScale.value !== 1 || activeTrendInteractionMode.value !== 'none')
|
||||
)
|
||||
})
|
||||
|
||||
const activeTrendToolStates = computed<Partial<Record<TrendToolAction, boolean>>>(() => ({
|
||||
'box-zoom': activeTrendInteractionMode.value === 'box-zoom',
|
||||
pan: activeTrendInteractionMode.value === 'pan'
|
||||
}))
|
||||
|
||||
const disabledTrendToolStates = computed<Partial<Record<TrendToolAction, boolean>>>(() => ({
|
||||
pan: !canPanTrendChart.value
|
||||
pan: !canPanTrendChart.value,
|
||||
reset: !canResetTrendChart.value
|
||||
}))
|
||||
|
||||
const TREND_AXIS_EXPAND_RATIO = 1.2
|
||||
@@ -370,9 +380,9 @@ const TREND_AXIS_EXTRA_SPLIT_SCORE = 0.25
|
||||
const TREND_AXIS_READABLE_INTERVAL_STEPS = [1, 2, 2.5, 5, 10]
|
||||
const TREND_GRID_TOP = '6px'
|
||||
const TREND_GRID_LEFT = '52px'
|
||||
const TREND_GRID_RIGHT = '18px'
|
||||
const TREND_GRID_RIGHT = '36px'
|
||||
const TREND_GRID_BOTTOM = {
|
||||
withTimeAxis: '30px',
|
||||
withTimeAxis: '34px',
|
||||
withoutTimeAxis: '6px'
|
||||
}
|
||||
const TREND_LINE_MAX_WIDTH = 1.6
|
||||
@@ -764,7 +774,7 @@ const buildTrendChartOptions = (
|
||||
// 仅最后一张图显示时间轴,前两张图不再额外预留占位,尽量放大趋势内容区。
|
||||
name: showTimeAxis ? 'ms' : '',
|
||||
nameLocation: 'end',
|
||||
nameGap: showTimeAxis ? 6 : 0,
|
||||
nameGap: showTimeAxis ? 8 : 0,
|
||||
nameTextStyle: {
|
||||
color: axisTextColor
|
||||
},
|
||||
@@ -802,6 +812,25 @@ const buildTrendChartOptions = (
|
||||
moveOnMouseWheel: activeTrendInteractionMode.value === 'pan'
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
// 外部工具栏通过 takeGlobalCursor 激活框选放大,ECharts 仍需要注册 toolbox.dataZoom 才会创建框选控制器。
|
||||
show: true,
|
||||
showTitle: false,
|
||||
itemSize: 0,
|
||||
itemGap: 0,
|
||||
left: -100,
|
||||
top: -100,
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: 'none',
|
||||
brushStyle: {
|
||||
color: 'rgba(64, 158, 255, 0.18)',
|
||||
borderColor: 'rgba(64, 158, 255, 0.65)',
|
||||
borderWidth: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
color: chartColors,
|
||||
series: buildTrendSeries(seriesList)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user