pinklaosa opened a new issue, #21019:
URL: https://github.com/apache/echarts/issues/21019
### What problem does this feature solve?
**### Is your feature request related to a problem? Please describe.**
Currently, the brush.brushStyle is a global configuration that applies to
all brush areas on the chart. It's not possible to define different styles
(e.g., different color, borderColor, borderWidth) for different brushes,
especially in a chart with multiple grids that are linked together.
For example, in a Candlestick chart with a separate Volume chart below it
(using two grids), I want the brush on the main candlestick chart to have a
different visual style from the brush on the volume chart. This would help to
visually distinguish the context of the selection.
Describe the solution you'd like
It would be ideal if we could specify a brushStyle on a per-area basis.
There could be a few potential API designs:
1. Allow brushStyle within the areas array of dispatchAction:
>myChart.dispatchAction({
type: 'brush',
areas: [
{
brushType: 'lineX',
coordRange: ['2016-06-02', '2016-06-20'],
xAxisIndex: 0,
brushStyle: { // Style for this specific area
fill: 'rgba(255, 0, 0, 0.2)'
}
},
{
brushType: 'lineX',
coordRange: ['2016-06-02', '2016-06-20'],
xAxisIndex: 1, // Corresponds to the second grid
brushStyle: { // A different style for this area
fill: 'rgba(0, 0, 255, 0.2)'
}
}
]
});
Describe alternatives you've considered
The only alternative is to listen to the brushselected event and then call
myChart.setOption() to dynamically change the global brush.brushStyle. However,
this is not ideal because the style only updates after the user finishes
dragging, not during the interaction.
**Here is a minimal reproduction link showing the current limitation:**
https://echarts.apache.org/examples/en/editor.html?c=candlestick-brush&code=MYewdgzgLgBArgBwMIgDYgE4wLwwOQDEADEQCYCGAzMHgNwBQokspIA7mCulroQKbASJOvQBmcMMCgBLcDAgJU0qABFyUcgAoM5Nmo0BKGAG96MGKj6xg6vgHNMAT33kcMANoBdBucuwAbuSocHwQbl4-FlYw_mhwALah4d5mMKKYMJp-MNJuRLQ5MAA8MDp66uQAdJZgdlAAFgXSANTNRqbm5jZQ9k4ulQhwEPXaui7u0p6VCkrAfJpEADQwAIwG7kSeBpHmgcGhA0MjZeOT26m7cYkQh8OaE8snFROe7gAsno9jz5MbnjAAPlK3w0L3cK3-AH5VjAAFwwAC0EPO5gAvqkMFY4BgwCYLjBur0MM4KvDCQ5iS5Fvi9iEIPDaaFqZ0YldQgy2RBUqiGOjxJIZHIbKhgHBULYALIAQU0FEcKAkUGWFEMeN25CwmIgYtguAiqXSWE0gSwuVwSyiuNwKqqjJuNTqjUKJRqTVa7Xx0lEmVyJTlCrAUA9LPMWp1txGeAReBRIaYMjAIR2MHRLJN8gSeWThsy6YAVlmYAW_eR5SBFQU8-61SHtfEYM1rRVKnaJoii68IcnU50w6goBHNM1NHWYAB6GD-8uBgyVKAgABi0gAHnxSJpKAZYz3MVBsbi-1BefQACSVOxWTQAJQA8jeACoAfQAClL7wAJBv4Mc2sfkCAQFYP4VGO0AgMAADWCIqAAUgAkpUeYQOAeDLPyUiyLiozlKqHQxBqk4VG4MzKC42EuLG8TyvUGoDoBUA3gggpgJo-KaCATGYW4eEsuQYDSPE6iYfCohBIBzIhpYF5gKQ8I8SGABGIBQPO8TwisSz4iyliiFA8J4HMgZ8BgqFaZ0Nrwu4eAqOwCIweASTSDJfDLqh-DSgArG5eDShp3nSgATEQ_lSpQwWeGZ
qISSy85oDICByWZ5hQBg0h2BeGD6eQy7SBApkhp02W5c-IBOT0mU1gVyWOAgfD6cAGAgABeBJSm0WKZgpDGQA6tIpANOp7UskpGBdRgXCYPpBDADN-VVQg5CkKQTl2OpmlVTAPTLlAADKUCOJYiUbV0aCTfgxDCK1UWtQgTXKMJaQSBhciaLdEDLAtOjxO9MB8Kgyx_VeAhKvI0gAF58MGx1MNAMAgApBa4PJG3zglqxEK1aLJgV8N5u4Vk6VA3mpXY9RE68w5vX8xSgxDLbSHwbA7eDfDUxOAUGJ4_y4GF2Mhru-5wwjfNoq1Y4Ti5KXkEgAH3pL-lsH1A2rAA7EQCCuZFQ0wEVEAlWVxlHVVShgBBlmY5Vx3LlKOUQHBznLllqCoC1x0pq1nyteKCl_UbG0KeQkF2I1EikBNFWECrUeu1VPYstdBWxagSmO5bLKiHw6jYnVachjaABaIAgGpucFY4Nu5fbXWp6JqCARbCfHQpGBHH7x37bVll4CbfAABrecAlgangEVu3HIbj2i2vN63pcwNbttVy5Tsu9r5gz8MAAyTlm_gQSr615YMaIABCLfDG3BWgNwUqoAgNHwkQlQrFdWtmf4uVwEEErkGjyOdMMdgIkxJ8DXvIYyDM7YO3hB5MBy1EiQAegFMBCAGZzHpB4C2_8CqMkGhbE63B4SsA4OHBuYDzDYJDLgxEKxyGdGvmdRApCx4ezfgVYOfVzYbUob4Pgul9IaQAKRzQ2iTMm-kAAcwi6H1D4GlcR-APJEGEVdMBPCoj8PwEIkRVUxF6XwFInRicOL6QAGyUGkRbWR8j9F4BWKYlRG1J4wE9gVBeuUuFVXUR3HOBlbAUkcEYvOpJCIaEqOSPoFQ6FKVDhqRwABxX-wC66gItrrbeYAc7GDhmAfOxkQDJMAm1C2JEoAZKyfIeoQC0ggOKW7eITl9I2glE5IJLJBKpzwM07KbTCq231kZCq6jzBgzWhjFhTi1EWx8fVf
xThenmA4aQJeqdaEWwsqEqoETKRRItjEmScTElo1ruJNJttylyRyXkxqhS-B1OOrre80hIKXMAWwW59yNqlIuSYSp1STl3MbhtdJ5AfaoFeVU95NSUmfKqg0sATSKgtLAAsmAHTEUaB_prJxZlXEhnLrbTxBV1EQGFDnFKIQ6GlKlJicgl8qpvPhBSvgDdVGtRJWSplLdUluyWSsvBbtSkADkEg-wqsgs5uVN6gt9r8xl0KilAqqukpyFT5UAthQVR5zzd7ZPVbUpVBVvmqohf8g1r8Cp4pZAXIuJd3DsumTVXxTkIB9T4Ki9xUDq6WQtBCKlGgMD6IAJwSLoXwGSYy2XcJKZCrllKLaev5R4X1VqqozPwBAJQY1UWo0kR5SxgqA3BtDRbcNsl0bjNjri7WgFUrskwdGt2YByCJH0jZNgdkHJhCctXHNTrZkyUsNAHVqKNk2hbEEOkdDlB8HiHtA6WT8EElOhVJhK66EEMwEQIh7BODrqXSNMa4d4Shz4aq0gG6YCHuMuHbd8BnKiHPayyZDqm0tt8Z5Ptnd8A91HSE4UopxQ9GlJoWBmyDBUviEXZWzK6E93nYdOeLIOKB2UI4R-lQPLPtjlMt9rb3JSj8nQ9N3dVV_o0GSIIgHJQyg0sqCoEGSlQeUvUONPLjrwf2oh4ZcMFrADQxhrDEycOvuOs2_DPkpRBS_b439dCNkAbFDRzQQV6OGEg9B1jm1uVwdVQhxdbtzAof4_tQT2GCqGs6Oo8TH7QrBWI_2n9ZH5P_qo0p4DMowpqfIIxwVzGYM6Ytpxhd9KcZ8YEzAJ-QnjrOKnqJjaNn9IADU2Qyf0gHEydDE3QNWHQgllcctrLdmO5ssRgjXAtSGUenRUS-c6My1IlFqK0UqMtBQ6hgD1ClM9Fi8kSMb3qDojUmcMH2uJa1Ab95HOkcyf3MBoBOpXj4heLuQV7EIiIKYjbAVvJra25thE0nU0smy96yLbCQyUMm9Nnuc3
WoLdGkt2oOcrJ7Y228JEO3lh4De0QDyG3KAjzAad5e52LP4mq7V3k2wgA
### What does the proposed API look like?
> option = {
> // ...
> brush: [
> {
> xAxisIndex: 0,
> brushStyle: { fill: 'rgba(255, 0, 0, 0.2)' }
> },
> {
> xAxisIndex: 1,
> brushStyle: { fill: 'rgba(0, 0, 255, 0.2)' }
> }
> ],
> // ...
> }
or
> myChart.dispatchAction({
type: 'brush',
areas: [
{
brushType: 'lineX',
coordRange: ['2016-06-02', '2016-06-20'],
xAxisIndex: 0, // Brush บนกราฟแรก
brushStyle: { // สไตล์สำหรับ Brush แรก
fill: 'rgba(255, 0, 0, 0.2)' // ★ สีแดงโปร่งแสง
}
},
{
brushType: 'lineX',
coordRange: ['2016-06-02', '2016-06-20'],
xAxisIndex: 1, // Brush บนกราฟที่สอง
brushStyle: { // สไตล์สำหรับ Brush ที่สอง
fill: 'rgba(0, 0, 255, 0.2)' // ★ สีน้ำเงินโปร่งแสง
}
}
]
});
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
