[Feature] create a dynamic confidence band in ECharts with varying transparency based on proximity to lower and upper bounds #18896
Description
What problem does this feature solve?
I'm working on a data visualization project using ECharts, and I need to create a confidence band that adjusts its transparency based on the proximity to the lower and upper bounds. Specifically, I want the transparency to be higher (less opaque) when the data points are near the lower or upper bounds, and lower (more opaque) when the data points are farther away from the bounds.
The below is a perfect example solution, but it lacks the dynamic transparency:
https://echarts.apache.org/examples/en/editor.html?c=confidence-band
ideally it should be as in below:
I think the line gradient can be used to do this as in below code:
option = {
xAxis: {
type: 'category'
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
},
{
color: 'rgba(255, 70, 131, 0)',
data: [300, 500],
type: 'line',
stack: 'area-1'
},
{
color: 'rgba(255, 70, 131, 0)',
stack: 'area-1',
data: [900, 1200],
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0.8667,
color: 'rgba(255, 70, 131, 0.8667)'
},
{
offset: 0.1333,
color: 'rgba(255, 70, 131, 0.1333)'
}
])
}
}
]
};
but the problem is that how to properly put the right offset, as you can see in the below image it's not right as in the bottom it's dark, which is wrong, it has to be dark when near the blue line
Thank you!
What does the proposed API look like?
maybe something like this:
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
},
{
color: 'rgba(255, 70, 131, 0)',
data: [300, 500],
type: 'line',
stack: 'area-1'
},
{
color: 'rgba(255, 70, 131, 0)',
stack: 'area-1',
data: [900, 1200],
type: 'line',
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
applyOn: 'self' // will be applied on the current series
offset: 0.8667,
color: 'rgba(255, 70, 131, 0.8667)'
},
{
applyOn: 'stack' // will be applied on the areas stack to it
offset: 0.1333,
color: 'rgba(255, 70, 131, 0.1333)'
}
])
}
}
]
or a better one will be allowing a callback function on the colors property that has params as parameter so, we can do something like in below:
itemStyle: { // or areaStyle
color: function (params) {
const currentLineValue = params.value - base;
const transparency = 1 - currentLineValue / 100;
const colorString = 'rgba(51, 51, 51, ' + transparency.toFixed(2) + ')';
return colorString;
}
}