ECharts雷达图能否为每个节点单独设置itemStyle实现差异化颜色

问题原因 #

雷达图本身暂不支持折线图那种为单个value项配置itemStyle的特性，你的配置写法不符合雷达图的数据结构要求，因此无法生效：

• 雷达图series.data.value数组仅支持传入纯数值，不支持嵌套带itemStyle的对象结构
• symbol属性确实仅支持固定字符串，不支持回调函数配置

可行实现方案 #

推荐使用series.itemStyle.color回调函数实现，该配置支持传入函数，可通过参数拿到当前节点对应的指示器下标dataIndex，根据下标返回对应颜色即可，无需修改原有数据结构，改造成本最低。

修改后的配置示例

// 提前定义每个指示器对应的节点颜色，顺序和radar.indicator顺序一一对应
const nodeColors = [
  'rgba(16, 198, 80, 1)',
  'blue',
  'black', 
  'purple',
  'red',
  'orange'
]

this.options = {
  radar: {
    indicator: [
      { name: `Sales`, max: 6500 },
      { name: 'Administration', max: 16000 },
      { name: 'Information Technology', max: 30000 },
      { name: 'Customer Support', max: 38000 },
      { name: 'Development', max: 52000 },
      { name: 'Marketing', max: 25000 },
    ],
    triggerEvent: true,
    name: {
      formatter: function (params: any) {
        return params as string;
      },
    },
    axisLine: {},
    splitArea: {
      show: false,
    },
  },

  series: [
    {
      type: 'radar',
      symbolSize: 10,
      // 新增itemStyle颜色回调
      itemStyle: {
        color: (params) => {
          // params.dataIndex就是当前节点对应的indicator下标，从0开始
          return nodeColors[params.dataIndex]
        }
      },
      data: [
        {
          // value直接放数值即可，不需要嵌套对象
          value: [4200, 3000, 20000, 35000, 50000, 18000],
          areaStyle: {
            normal: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgba(176,196,222, 0.3)',
                },
                {
                  offset: 1,
                  color: 'rgba(176,196,222, 1)',
                },
              ]),
            },
            emphasis: {
              color: new graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#2c2c2c54' },
                { offset: 0.7, color: '#2c2c2c54' },
                { offset: 1, color: '#2c2c2c7a' },
              ]),
            },
          },
        },
      ],
      tooltip: {},
      lineStyle: {
        color: 'rgba(96, 125, 139, 1)',
        width: 3,
      },
    },
  ],
};

如果需要实现更复杂的节点差异化配置（比如不同节点用不同的标记形状、大小），可以使用ECharts的自定义系列（custom）自行渲染每个雷达节点，配合雷达图的坐标转换API计算每个节点的位置即可。

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