同位置多值场景下散点图更新异常问题求助

散点图修复方案 #

问题根源 #

散点图取消复选框时另一个系列形状改变，是因为切换可见性时错误覆盖了未隐藏系列的样式配置——当前代码中系列的形状等样式未与各团队数据绑定，更新时会被意外重置。

修改步骤与代码 #

1. 重构数据结构，绑定样式与团队数据
   将每个团队的样式（如点形状、颜色）和数据、可见性状态绑定在一起，避免共享变量导致的样式污染：

const initialChartData = [
  {
    name: 'team1',
    visible: true,
    symbol: 'circle',
    color: '#1f77b4',
    data: [...你的team1数据]
  },
  {
    name: 'team2',
    visible: true,
    symbol: 'triangle',
    color: '#ff7f0e',
    data: [...你的team2数据]
  }
];

const [chartData, setChartData] = useState(initialChartData);

2. 更新复选框切换逻辑，仅修改对应团队可见性
   handleToggle函数只调整目标团队的visible状态，不改动其他团队的配置：

const handleToggle = (teamName) => {
  setChartData(prevData => 
    prevData.map(item => 
      item.name === teamName 
        ? {...item, visible: !item.visible} 
        : item
    )
  );
};

3. 渲染时按独立配置生成系列
   根据每个团队的可见性和样式生成散点图系列，确保样式独立：

const series = chartData
  .filter(item => item.visible)
  .map(item => ({
    name: item.name,
    type: 'scatter',
    symbol: item.symbol,
    color: item.color,
    data: item.data
  }));

修改后，切换复选框仅控制对应系列的显示/隐藏，不会影响另一系列的形状和样式。

折线图多值Tooltip实现方案 #

若改用折线图，只需配置ECharts的Tooltip参数，即可实现同一x轴位置显示所有系列数据：

const option = {
  tooltip: {
    trigger: 'axis',
    mode: 'index', // 按x轴索引展示该位置所有系列数据
    intersect: false // 无需鼠标精确命中数据点
  },
  // 其他轴配置、系列配置...
  series: [
    {
      name: 'team1',
      type: 'line',
      data: team1数据
    },
    {
      name: 'team2',
      type: 'line',
      data: team2数据
    }
  ]
};

配置mode: 'index'后，鼠标悬停在任意x轴位置时，Tooltip会自动展示该位置下所有团队的数据。

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