[Bug] Cannot style legend icon inner circle background colour

[cge-taal]

Version

5.4.3, 5.3.2

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/wonderful-kate-24l2p5?file=%2Fsrc%2Findex.js

Steps to Reproduce

Run the codesandbox example

Current Behavior

Currently the default legend icon for a line series has a white circle background that does not allow styling. At least no property listed on https://echarts.apache.org/en/option.html#legend seems to allow it.

Expected Behavior

It should be possible to style it to allow a better look in projects with different graph background colours.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[MatthiasMert]

The symbol used in the legend is the symbol you configured for the series. Here is an example.

[cge-taal]

Hi @MatthiasMert , thank you for your reply.

In my example code I did try to illustrate some of the things I tried (pls see below). I do understand that setting symbol: "circle" on line removes the white circle in the legend icon. Yet, purely aesthetically speaking, I like it with the inner circle, but would like a way to define the colour for that inner circle (background).

Keeping it linked to the line marker look is fine, in which case it will probably make sense to define something like backgroundColor /symbolBackgroundColor / emptyCircleBackgroundColorand use it in the line series definition.

  series: [
    {
      name: "Series 1",
      data: [120, 200, 150, 80, 70, 110, 130],
      type: "line",
      // symbol: "emptyCircle",
    },
  ],
  legend: {
    top: "bottom",
    textStyle: {
      fontWeight: 500,
      color: "#ccc",
    },
    // backgroundColor: "purple",
    // itemStyle: {
    //   color: "red",
    // },
    // lineStyle: {
    //   color: "orange",
    // },
  },

UPDATE: setting itemStyle.color for legend sets the colour on the legend icon line independently from the line markers, so their styles appear not strictly linked.. after all.

[cge-taal]

For reference..

symbol: "circle"

symbol: "emptyCircle"