apache / apache/echarts

[Feature] Allow SplitLine's on top of progressed part of gauge chart

Open
#20,384 3 comments 0 reactions 0 assignees View on GitHub
en new-feature pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### What problem does this feature solve?

The gauge chart `SplitLine` appears below the progressed part of the chart. For example:
![image](https://github.com/user-attachments/assets/640cc869-dfa4-4fa1-ae73-81d7e5729a40)

However, I'm trying to get the split lines to appear on top of the progressed section, for example:
![image](https://github.com/user-attachments/assets/aec9171f-eaa4-43fd-8b5a-32f44b5ab40f)

In [this example](https://echarts.apache.org/examples/en/editor.html?c=gauge-speed&code=PYBwLglsB2AEC8sDeAoWsDOBTAThLGAXLANprrLkWxgCeIWxA5AOYCGAri1kwDRUUAXsQCM_auhA5gLHASKUJFDAAtgAd2JgcHLOKWx1EACZgVogBwD0AX33U2ADwgYAMhGiNFBgDYesAMp0Pl6oBhRGpuawIlbhNtawdolOLgAqEADGANbEYQaqGsQAZmw-2PYUyUopzm5sAEZYPnmJ6IWaNDp6bbDGLmBs0JleALQAzACsldSZwD7AOMwAxACc63y9xTBgARCCXgBMAAyJ1RJDmWpL3kodJWUVvR0Agg3AAG5e2rozyvtHaa9CBgLAAWyCtBCrXC6HeOGMuAA6iYzKJTvEzn9IGBobcJPdYKVylgsYlEYMIC18dQPmVdC9oBAwWxIDAtN0_uhttBdgDiAA2Y5cok7JFYCAsFRgZh-KWgnCbcLAYrFbBgADCWF5uGIJGFsGOAF0RdscCywArmEg6T5dDYAKRKiTnajGVlsPW9fLhW26YgAdgxBgSShNiQwID8YHcnhhBkEIS-1JEx2FvX6GEGwzGsRFhJ-PXCIWgLDRMQsIr8nkheJ9Bki5YALCL0HMFjcmMsAGK9pi9UMuv4gYAeK005RqTrE7CwM4CV1z6gCAQAelXsCubBwYFgWDqYAwmHmzVoNGAmCnmCjINjWFgMHPIAE9fQdAYzHYXB4f2EMXTShSDIcgYAor6TkURKPEWQ61C4d7xncU4PCSVb-LWoS9OgjbRLEA5kkoqQYBkOSIQSyFQahBESHB9RNNS4HtBRM4wdQi7oJc1xkdQhIsX87E0CCdbPMx0HUW6WCUgxImQXx4kUO6gxeuEjEUH6XhBvhYZ_JG0YIRO6CZtmIzEKMeYyZ0hZVtqZa4ZWvTVoEwSYbChiotELZYZu8yLCsvbdv2mJKAJI5jrqBmXrJ0FLi6C7kEaKA2AA3EAA) I did actually get my desired chart to render, but it required rendering two charts, one with a lower z-index which shows everything and another on top of that chart with just the splitlines shown. I suspect, however, that this would break some accessibility features and introduce some lag to our pages. It is also just a weird workaround which requires drawing multiple charts to get the functionality which really should be available in one.

I did find https://github.com/apache/echarts/issues/16262 which gave me the idea for drawing multiple charts. It's a different issue which isn't as simple as just needing one part of the chart drawn on top of another, but the work around is the same.

### What does the proposed API look like?

There are two approaches. One focuses on the splitlines and the other fixes related issues as well.

The specific approach could be adding something to splitLines to draw it above the progressed part of the chart, something like:
```js
{
splitLine: {
distance: -18,
show: true,
length: 18,
lineStyle: {
width: 4,
color: '#FFF'
}
// new property
drawAboveProgress: true,
}
}
```

The more broad-reaching approach could be giving parts of the chart z-indices. It seems that some parts of some charts (i.e. [the legend](https://echarts.apache.org/en/option.html#legend.z)) do have the `z` property available, so perhaps this isn't a very novel idea at all. Perhaps it could be something like:

```js
{
type: 'gauge',
z: 1,
// ...
splitLine: {
z: 5,
distance: -18,
show: true,
length: 18,
lineStyle: {
width: 4,
color: '#FFF'
}
},
},
```

More broadly, we could add this to other components, or even just `lineStyle` and I suspect that this would solve a lot of related issues. Also, if `z` already means something slightly different (ie canvas z index), perhaps it would make sense to create a new property called `drawOrder` for this?

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.