ApexCharts如何设置特定图例系列不可点击？

可以通过动态更新ApexCharts的系列配置，给空数据的系列设置legendItem.clickable: false来禁用图例点击，具体调整你的代码如下：

useEffect(() => {
  if (props.bicycleType === "ROAD_BIKE") {
    // 获取图表实例
    const chart = ApexCharts.getChart("RoadBike");
    if (!chart) return;

    // 处理每个系列的图例点击权限
    const updatedSeries = roadBikeSeries.map(series => ({
      ...series,
      legendItem: {
        ...series.legendItem,
        // 空数据系列禁用图例点击，非空系列保留点击权限
        clickable: series.data.length !== 0
      }
    }));

    // 更新图表配置，应用图例点击设置
    chart.updateOptions({ series: updatedSeries }, false, true);

    // 执行系列显示/隐藏操作
    roadBikeSeries.forEach((series) => {
      if (series.data.length === 0) {
        ApexCharts.exec("RoadBike", "hideSeries", series.name);
      } else {
        ApexCharts.exec("RoadBike", "showSeries", series.name);
      }
    });
  }
}, [roadBikeSeries, props.bicycleType]);

说明 #

• 通过ApexCharts.getChart获取目标图表实例，确保能直接操作图表配置
• 遍历系列时，给每个系列配置legendItem.clickable属性：空数据系列设为false，禁止图例点击；非空系列设为true，保留交互能力
• 调用chart.updateOptions更新系列配置，第三个参数true强制重绘图例，确保修改立即生效
• 最后执行原有的显示/隐藏逻辑，保证空数据系列处于隐藏状态且图例不可点击

你也可以在图表初始化阶段，就根据初始数据给对应系列设置legendItem.clickable，后续数据更新时再复用上述逻辑，让初始化阶段就生效。

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