我可以在每个节点上添加不同的 itemStyle，以便每个节点在雷达 echarts 上具有不同的颜色吗？

Question

我在此链接https://echarts.apache.org/en/option.html#series-line.data.itemStyle 中找到了一个示例，您可以在其中为每个符号添加不同的颜色。但是，当我尝试在我的案例中实施时，它似乎不受支持。我做错了什么或者确实在这种类型的图表中不受支持？有没有办法在每个节点上添加不同的颜色？我试图在“符号”上添加一个函数，但它只接受字符串，所以它不可能。

基本上这是我想要实现的，但使用雷达图。

这就是我要问的：

上面图表的代码是：

    option = {
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  yAxis: {},
  series: [{
    data: [{
      value: 820,
      itemStyle: {
        color: "rgba(16, 198, 80, 1)"
      }
    }, {
      value: 820,
      itemStyle: {
        color: "rgba(13, 255, 0, 1)"
      }
    }, {
      value: 820,
      itemStyle: {
        color: "blue"
      }
    }, {
      value: 820,
      itemStyle: {
        color: "black"
      }
    }, {
      value: 820,
      itemStyle: {
        color: "purple"
      }
    }, 1330, 1320],
    type: "line",
    itemStyle: {
      color: "rgba(225, 55, 55, 1)"
    }
  }]
}

这是我的代码：

this.options = {
  radar: {
    // shape: 'circle',
    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) {
        // console.log(params);
        return params as string;
      },
    },
    axisLine: {},
    splitArea: {
      show: false,
    },
  },

  series: [
    {
      type: 'radar',

      symbolSize: 10,

      data: [
        {
          value: [
            {
              value: 4200,
              itemStyle: {
                color: 'rgba(16, 198, 80, 1)',
              },
            },
            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,
      },
    },
  ],
};

Answer 1

您可以将它们设置为不同的颜色，但您的选项似乎没有遵循正确的数据类型。阅读radar series data type docs，您会注意到 data 是一个对象数组，这些对象代表您的条目，每个条目都有一个值数组、一个项目样式和一个区域样式以及文档中已经提到的更多内容，您的错误正在嵌套系列中的值，值：{值？？ }。 下面是你应该做的一个例子。

option={
  radar: {
    indicator: [
      {
        name: `Sales`,
        max: 10
      },
      {
        name: 'Administration',
        max: 10
      },
      {
        name: 'Information Technology',
        max: 10
      },
      {
        name: 'Customer Support',
        max: 10
      },
      {
        name: 'Development',
        max: 10
      },
      {
        name: 'Marketing',
        max: 10
      },
      
    ],
    
  },
  series: [
    {
      type: "radar",
      data: [
        {
          value: [
            1,
            2,
            3
          ],
          itemStyle: {
            color: 'red'
          },
          areaStyle: {
            color: 'red'
          }
        },
        {
          value: [
            4,
            5,
            6
          ],
          areaStyle: {
            color: 'purple'
          }
        }
      ]
    }
  ]
}