百度的echarts - 填充2行之间的空间

Question

I would like to find an approach on how to draw 2 lines in ECharts and fill up the space between them like this:

So that each line has it's own color. Depending on order of lines - area is filled into one color or another (see image).

Is there a native way of doing it? I found that some people are mentioning extensions , but nobody is providing any kind of instructions on how to write them from scratch.. Nor I found any examples on official documentation page. I would appreciate if somebody could point me to correct direction on how to achieve this goal.

In the worst case - I would accept other libraries if they have such very needed option.

The best I could do is this:

var chartOptions = {
    xAxis: [{
        type: 'value'
    }],
    yAxis: [{
        type: 'value'
    }],
    series: [{
        type: "line",
        data: [[0, 4], [1, 3], [2, 2], [3, 2], [4, 1], [5, 2]],
    }, {
        type: "line",
        data: [[0, 2], [1, 3], [2, 4], [3, 8], [4, 5], [5, 0]],
    }],
};
var aChart = echarts.init(document.getElementById('aGraph'));
aChart.setOption(chartOptions);

Answer 1

I've usedareaStyle to fill the area between the axisLine and the data. I would try to solve this issue by adding the green/yellow areaStyle to the green series, adding a pink areaStyle to the red series, and then adding a white areaStyle to a new series made up from the min values from the other two series. Combined with a lineStyle with a width of 0, you could mostly achieve the look in the sketch, however, the minimum series fill would probably also obscure the interior grid lines.