echarts [Bug] emptyCircle series symbol fill defaults to white (dark mode problem)

vatpfxk5  于 2022-11-02  发布在  Echarts
关注(0)|答案(1)|浏览(171)

Version

5.3.2

https://codesandbox.io/s/interesting-bouman-e85bk3

Steps to Reproduce

Link above should show issue. No additional work needed. Otherwise, here are some options to test.

Option 1:

  1. Create a line chart
  2. The default symbol for line chart is emptyCircle . If it for some reason doesn't show, you can set the series symbol to emptyCircle
  3. Set your background color to a darker color or switch to dark mode

Option 2:

  1. Go to the echarts line-chart example ( https://echarts.apache.org/examples/en/editor.html?c=line-simple )
  2. Turn on dark mode. Notice that empty circle is now defaulted to circle
  3. Under series, add the following code
    symbol: 'emptyCircle', symbolSize: 10,

Current Behavior

The fill color is set to white. This looks particularly bad with dark mode

Expected Behavior

I would expect the word 'empty' to have no fill color associated with it, and therefor could be used regardless of the chart background color.

Environment

- OS: macOS Monterey v12.4
- Browser: Chrome 104.0.5112.101
- Framework: React@17

Any additional comments?

Looking in the code I found the following where any symbol with empty sets the fill color to white.
echarts/src/chart/line/LineSeries.ts

Lines 258 to 262 in db866d8

| | if(symbolType.indexOf('empty')>-1){ |
| | symbol.style.stroke=symbol.style.fill; |
| | symbol.style.fill='#fff'; |
| | symbol.style.lineWidth=2; |
| | } |

kyvafyod

kyvafyod1#

Please use circle instead of emptyCircle and you can set its color and borderColor .

相关问题