feat(waveform): 添加波形图趋势工具和坐标轴规则
- 实现波形图纵坐标显示规则,包括最大最小值显示、刻度均分、对称边界等功能 - 添加多图趋势图对齐规则,确保绘图区左边界一致和标签宽度统一 - 集成图表点击事件发射器,支持时间标签、数值和系列名称的数据传递 - 实现波形图缩放、平移、测量、峰值标记等交互功能 - 添加坐标轴刻度精度控制和可读步长归一化处理 - 实现多图对齐的网格配置和纵坐标标签防重叠机制 - 添加波形图全屏展示和图片导出功能 - 实现趋势图峰值标记点和测量游标功能
This commit is contained in:
@@ -29,6 +29,15 @@ const color = [
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
|
||||
const props = defineProps(['options', 'isInterVal', 'pieInterVal', 'group'])
|
||||
const emit = defineEmits<{
|
||||
'chart-click': [
|
||||
value: {
|
||||
timeLabel: string
|
||||
value: number
|
||||
seriesName: string
|
||||
}
|
||||
]
|
||||
}>()
|
||||
let chart: echarts.ECharts | any = null
|
||||
const resizeHandler = () => {
|
||||
// 不在视野中的时候不进行resize
|
||||
@@ -41,7 +50,6 @@ const resizeHandler = () => {
|
||||
})
|
||||
}
|
||||
const initChart = () => {
|
||||
|
||||
if (!props.isInterVal && !props.pieInterVal) {
|
||||
chart?.dispose()
|
||||
}
|
||||
@@ -127,8 +135,24 @@ const initChart = () => {
|
||||
// console.log(options.series,"获取x轴");
|
||||
handlerBar(options)
|
||||
|
||||
// 处理柱状图
|
||||
chart.setOption(options, true)
|
||||
chart.off('click')
|
||||
chart.on('click', (params: any) => {
|
||||
const value = Array.isArray(params.value) ? params.value[1] : params.value
|
||||
|
||||
if (params.componentType !== 'series' || !Number.isFinite(Number(value))) return
|
||||
|
||||
emit('chart-click', {
|
||||
timeLabel: `${params.name ?? params.dataIndex ?? ''}`,
|
||||
value: Number(value),
|
||||
seriesName: `${params.seriesName || ''}`
|
||||
})
|
||||
})
|
||||
chart.dispatchAction({
|
||||
type: 'takeGlobalCursor',
|
||||
key: 'dataZoomSelect',
|
||||
dataZoomSelectActive: props.options?.activeTool === 'box-zoom'
|
||||
})
|
||||
|
||||
setTimeout(() => {
|
||||
chart.resize()
|
||||
@@ -176,7 +200,7 @@ const handlerYAxis = () => {
|
||||
axisLabel: {
|
||||
color: '#000',
|
||||
fontSize: 14,
|
||||
formatter: function (value) {
|
||||
formatter: function (value: number) {
|
||||
return value.toFixed(0) // 格式化显示为一位小数
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user