Incubator-echarts: 自定义雷达图 legend icon color

[confirmTing]

What problem does this feature solve?

当雷达图设置 areaStyle 且颜色是渐变色， legend 图例 icon 颜色也是渐变色，希望可以单独设置为单色

What does the proposed API look like?

无

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that you have posted enough image to demo your request. You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical questions.

If you are interested in the project, you may also subscribe our mail list.

Have a nice day! 🍵

[confirmTing]

my option

{
  "color": [
    "rgba(136,98,255,1)",
    "rgba(255,140,0,1)",
    "rgba(51,137,255,1)"
  ],
  "legend": {
    "left": 30,
    "textStyle": {
      "color": "#666"
    },
    "data": [
      {
        "name": "张三",
        "icon": "circle"
      },
      {
        "name": "李四",
        "icon": "circle"
      },
      {
        "name": "王五",
        "icon": "circle"
      }
    ]
  },
  "tooltip": {
    "show": false,
    "trigger": "item",
    "backgroundColor": "#fff",
    "borderColor": "#eee",
    "padding": 16,
    "borderWidth": 1,
    "extraCssText": "box-shadow:0px 4px 10px 0px rgba(0,0,0,0.08);",
    "textStyle": {
      "color": "#666"
    }
  },
  "radar": {
    "indicator": [
      {
        "name": "求实进取精神",
        "max": 9.6
      },
      {
        "name": "演绎思维",
        "max": 9.6
      },
      {
        "name": "归纳思维",
        "max": 9.6
      },
      {
        "name": "服务精神",
        "max": 9.6
      },
      {
        "name": "人才培养能力",
        "max": 9.6
      },
      {
        "name": "监控能力",
        "max": 9.6
      },
      {
        "name": "证实正直",
        "max": 9.6
      },
      {
        "name": "搜集信息",
        "max": 9.6
      }
    ],
    "radius": "60%",
    "shape": "circle",
    "name": {
      "textStyle": {
        "color": "#72ACD1"
      }
    },
    "splitArea": {
      "areaStyle": {
        "color": [
          "rgba(255, 255, 255, 1)"
        ]
      }
    },
    "axisLine": {
      "lineStyle": {
        "color": "rgba(221, 221, 221, 1)"
      }
    },
    "splitLine": {
      "lineStyle": {
        "type": "dashed",
        "color": "rgba(238, 238, 238, 1)"
      }
    }
  },
  "series": [
    {
      "name": "雷达图",
      "type": "radar",
      "emphasis": {
        "lineStyle": {
          "width": 2
        }
      },
      "data": [
        {
          "symbol": "circle",
          "areaStyle": {},
          "value": [
            4,
            8,
            8,
            7,
            4,
            7,
            8,
            3
          ],
          "name": "张三"
        },
        {
          "symbol": "circle",
          "areaStyle": {},
          "value": [
            6,
            3,
            4,
            5,
            4,
            6,
            5,
            8
          ],
          "name": "李四"
        },
        {
          "symbol": "circle",
          "areaStyle": {},
          "value": [
            6,
            7,
            6,
            5,
            3,
            8,
            7,
            5
          ],
          "name": "王五"
        }
      ],
      "color": [
        {
          "type": "linear",
          "x": 0,
          "y": 1,
          "x2": 0,
          "y2": 0,
          "colorStops": [
            {
              "offset": 0,
              "color": "rgba(80, 51, 255, 0.4)"
            },
            {
              "offset": 1,
              "color": "rgba(148, 89, 255, 0.4)"
            }
          ],
          "global": false
        },
        {
          "type": "linear",
          "x": 0,
          "y": 1,
          "x2": 0,
          "y2": 0,
          "colorStops": [
            {
              "offset": 0,
              "color": "rgba(254, 128, 38, 0.4)"
            },
            {
              "offset": 1,
              "color": "rgba(255, 200, 38, 0.4)"
            }
          ],
          "global": false
        },
        {
          "type": "linear",
          "x": 0,
          "y": 1,
          "x2": 0,
          "y2": 0,
          "colorStops": [
            {
              "offset": 0,
              "color": "rgba(77, 157, 255, 0.4)"
            },
            {
              "offset": 1,
              "color": "rgba(64, 137, 255, 0.4)"
            }
          ],
          "global": false
        }
      ]
    }
  ]
}

[plainheart]

当前可以使用legend.itemStyle.color来配置所有的图例颜色，不过legend.itemStyle并未在文档中列出，又由于legend.itemStyle.color只能对全部图例生效，无法对个项进行单独设置，可以考虑增加单独设置图例样式的功能，并使legend.itemStyle.color支持回调函数。

[plainheart]

看了下你给的示例，可以考虑将全局配置的color移动至每个系列中，单独设置每个系列的itemStyle以及areaStyle的color可实现你所要的效果。
这里有个示例：https://gallery.echartsjs.com/editor.html?c=x9M7zJvKJA&v=2

[confirmTing]

@plainheart 看起来很不错，感谢~

[confirmTing]

我使用了你的配置，仔细看了一下，虽然图例颜色变为单色了，但是area区域的边框也跟着变为实色了，这不是我想要的...

[plainheart]

你希望边框颜色是怎样的？

[plainheart]

请使用 series-radar.data.lineStyle.color 自定义每个系列数据项的边框颜色。

[confirmTing]

感谢，请问一下，咱们这边有沟通交流群吗？ 可以让信息反馈的更快速一些？