Vue3中ECharts Graph图表scaleLimit下切换图例中心偏移问题

问题描述 #

在Vue3项目中使用Apache ECharts的graph系列图表，设置scaleLimit后，超出限制缩放无反应符合预期，但切换图例类别时，zoom保持在scaleLimit的限制值，center却发生变化，导致图表跳转。

可复现场景：将图表缩放至scaleLimit的极限值后，取消选中某图例类别，图表会出现偏移移动。

我尝试了基于graphroam事件的临时方案，但仍偶有跳转，代码如下：

let lastCenter = [500, 500]
function handleRoam(evt) {
  const customOptions = chart.value.getOption()

  let newOptionValues = {
    series: {
      center: lastCenter
    }
  }

  if (evt.zoom) {
    if (customOptions.series[0].zoom <= 1) {
      chart.value.setOption(newOptionValues)
    } else if (customOptions.series[0].zoom > 1 && customOptions.series[0].zoom < 10) {
      lastCenter = customOptions.series[0].center
    } else if (customOptions.series[0].zoom >= 10) {
      chart.value.setOption(newOptionValues)
    }
  } else {
    lastCenter = customOptions.series[0].center
  }
}

更优解决方案 #

核心思路是监听图例切换事件，在切换后强制恢复之前保存的视图状态，避免ECharts自动调整center导致的跳转。

实现代码（Vue3） #

import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const chart = ref(null)
// 保存合法的视图状态（仅保存scaleLimit范围内的center和zoom）
const savedViewState = ref({
  center: [500, 500],
  zoom: 1
})

onMounted(() => {
  chart.value = echarts.init(document.getElementById('your-chart-dom-id'))

  // 初始化图表配置，确保包含scaleLimit
  const initOption = {
    legend: {
      // 图例配置
    },
    series: [
      {
        type: 'graph',
        roam: true,
        scaleLimit: {
          min: 1,
          max: 10
        },
        // 其他graph相关配置（节点、边数据等）
      }
    ]
    // 其他全局配置
  }

  chart.value.setOption(initOption)

  // 监听图例切换事件，恢复视图状态
  chart.value.on('legendselectchanged', () => {
    // 延迟执行，确保ECharts完成数据重绘
    setTimeout(() => {
      chart.value.setOption({
        series: {
          center: savedViewState.value.center,
          zoom: savedViewState.value.zoom
        }
      })
    }, 0)
  })

  // 监听roam事件，实时更新合法的视图状态
  chart.value.on('graphroam', () => {
    const currentSeriesOption = chart.value.getOption().series[0]
    // 仅当zoom在scaleLimit范围内时，才保存状态
    if (currentSeriesOption.zoom >= 1 && currentSeriesOption.zoom <= 10) {
      savedViewState.value.center = [...currentSeriesOption.center]
      savedViewState.value.zoom = currentSeriesOption.zoom
    }
  })
})

方案优势 #

1. 精准拦截跳转: 通过legendselectchanged事件直接干预图例切换后的视图状态，从根源解决center偏移问题
2. 状态保存更严谨: 仅保存scaleLimit范围内的视图状态，避免保存超出限制时的异常值
3. 避免冲突: 使用setTimeout延迟恢复操作，确保ECharts完成内部数据更新后再修改视图参数，降低逻辑冲突概率

内容的提问来源于stack exchange，提问作者Lachr