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 Диман Иванов <ragemo...@gmail.com> 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*
>
  • Issue 14167 Диман Иванов
    • Re: Issue 14167 Ovilia

Reply via email to