Baidu's echarts - filling up space between 2 lines

微笑、不失礼 提交于 2019-12-13 03:06:25

问题


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

来源:https://stackoverflow.com/questions/55694093/baidus-echarts-filling-up-space-between-2-lines

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!