Baidu's echarts - filling up space between 2 l

2019-08-27 17:18发布

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

enter image description here

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);

enter image description here

0条回答
登录 后发表回答