echarts icon indicating copy to clipboard operation
echarts copied to clipboard

[Bug] Unable to achieve line series with areacolor=linecolor

Open ob-ARC opened this issue 2 years ago • 4 comments

Version

5.3.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRARAMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6ADZsq0AUSQOS5HPk_e6HhURlSEsKKopLDQjAC2NLIseGC8_LBCYCIRABwATAAMPLAAnADMecUlBQCMVWUALMU1edXNZWVFsDUVBdaOpBTUdE4Q0MoD6IwcVIwmFC6e6ej0wE6cdBysAEaMABQtOc15R90nxQUAdACsAJRp0eicEKxjdCnTqZOkoIz0EBQiDV0oFSKNxvNyItiI9YKt1hxNjt9odjqdUbArncHo8holaHg1hBNN8niA_gDyEDSbAAO7EsDaIEFEH2Wx2IA&_source=echarts-doc-preview

Steps to Reproduce

See link for reproduction.

Current Behavior

Setting the same color to areastyle and linestyle does NOT result in the line being "invisible" (i.e. non-distinguishable from the area). Probably caused by the fact that line and area are actually overlapping. It is possible to simply hide the line of course (width = 0, opacity = 0 or color.alpha = 1), but that also means the legend entry becomes invisible.

Expected Behavior

Line and area should not overlap in rendering.

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

ob-ARC avatar Aug 04 '22 12:08 ob-ARC

I'm sorry to close this issue for it lacks the necessary title. Please provide a descriptive and as concise as possible title to describe your problems or requests and then the maintainers or I will reopen this issue.

Every good bug report or feature request starts with a title. Your issue title is a critical element as it's the first thing maintainers see.

A good issue title makes it easier for maintainers to understand what the issue is, easily locate it, and know what steps they'll need to take to fix it.

Moreover, it's better to include keywords, as this makes it easier to find the issue self and similar issues in searches.

echarts-bot[bot] avatar Aug 04 '22 12:08 echarts-bot[bot]

This is not a bug and it may not easy to achieve what you want. This is because Canvas/SVG line width is shown on both sides of the line, which is most likely because we don't have an idea which is inside and outside. Besides using opaque colors, you can set the lineStyle.width to be 0 if you don't want should the line.

Ovilia avatar Aug 05 '22 05:08 Ovilia

The problem with lineStyle.width=0 is that this will also interfere with the legend, causing the series indicator line being invisible there. Is there a way to come around this by modifying the legend?

ob-ARC avatar Aug 05 '22 06:08 ob-ARC

You can set the borderWidth of legend to be non-zero values. By default, it's 'auto' so the width of the series is used.

Ovilia avatar Aug 05 '22 07:08 Ovilia