Hi,
A workaround way you may try is to take two series, each of which has one
threshold.
var realData = [150, 230, 224, 218, 135, 147, 260];
var max = realData.reduce(function (a, b) {
return Math.max(a, b);
}, -1);
var min = realData.reduce(function (a, b) {
return Math.min(a, b);
}, max);
var yAxisMax = 300;
var thretholdHigh = 190;
var rateHigh = 1 - thretholdHigh / max;
var thretholdLow = 170;
var rateLow = (yAxisMax - thretholdLow) / (yAxisMax - min);
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
max: yAxisMax
},
color: 'blue',
series: [{
data: realData,
type: 'line',
areaStyle: {
// origin: 'start'
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'blue'
}, {
offset: rateHigh, color: 'blue'
}, {
offset: rateHigh + 0.001, color: 'transparent'
}],
}
},
z: 10
}, {
data: realData,
type: 'line',
showSymbol: false, // hide data item circle
lineStyle: {
width: 0 // hide line
},
areaStyle: {
origin: 'end',
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: 'transparent'
}, {
offset: rateLow, color: 'transparent'
}, {
offset: rateLow + 0.001, color: 'red'
}],
}
}
}]
};
Thanks
*Ovilia*
On Sat, Feb 20, 2021 at 10:32 PM Диман Иванов <[email protected]> wrote:
> Hello Echarts team!
>
> A few weeks ago, I asked a question about the possibility of combining the
> two approaches in working with *VisualMap* and *series-line.areaStyle*.
> And your issue bot prompted me this email, where I could remind about
> myself)
> Please, let me know is it possible to simultaneously implement the two
> given examples on the one data set. If not, are there any alternatives?
>
>
> https://github.com/apache/echarts/issues/14167
>
>
> --
> *Regards, Dmitriy*
>