在ngx-echarts中如何配置图例未激活状态的自定义图标？

首先纠正你代码里的一个小错误：legend.data必须是数组格式，不能写成重复的data对象属性（否则后面的配置会覆盖前面的），正确的基础配置结构如下：

this.chartOption = {
  legend: {
    data: [
      {
        name: 'serie1',
        // 选中状态的复选框SVG路径
        icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z'
      },
      {
        name: 'serie2',
        icon: 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z'
      }
    ]
  },
  // 其他图表配置（xAxis、yAxis、series等）
};

ECharts官方确实没有提供inactiveIcon这类直接配置未激活状态图标的参数，但可以通过监听图例选择事件+动态修改图标的方式实现需求：

具体实现步骤 #

1. 预先定义两种状态的复选框SVG路径：

// 选中状态的复选框路径
const checkedIconPath = 'path://m419-321 289-290-43-43-246 247-119-119-43 43 162 162ZM180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Z';
// 未选中状态的空心复选框路径（可根据需求替换成自己的SVG路径）
const uncheckedIconPath = 'path://m180-120q-24 0-42-18t-18-42v-600q0-24 18-42t42-18h600q24 0 42 18t18 42v600q0 24-18 42t-42 18H180Zm0-60h600v-600H180v600Z';

2. 获取ECharts实例并监听选择事件：
   假设你的模板代码是：

<div echarts [options]="chartOption" (chartInit)="onChartInit($event)"></div>

在组件类中实现事件监听和图标切换逻辑：

private chartInstance: any;

onChartInit(instance: any) {
  this.chartInstance = instance;
  // 监听图例选中状态变化事件
  this.chartInstance.on('legendselectchanged', (params: any) => {
    // 遍历图例数据，根据选中状态替换对应图标
    const updatedLegendData = this.chartOption.legend.data.map((item: any) => ({
      ...item,
      icon: params.selected[item.name] ? checkedIconPath : uncheckedIconPath
    }));
    // 更新图表配置
    this.chartInstance.setOption({
      legend: {
        data: updatedLegendData
      }
    });
  });
}

3. 可选：初始化时设置默认未选中的系列图标
   如果有默认未选中的系列，初始化时直接将其icon设为uncheckedIconPath即可。

原理说明 #

通过监听图例的legendselectchanged事件，每次用户点击切换选中状态时，动态修改对应系列的icon参数，再调用setOption更新图表，就能实现激活/未激活状态显示不同复选框图标的效果。

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