javascript - 百度的 echarts - 填满两行之间的空间

Question

我想找到一种如何在 ECharts 中绘制 2 条线并填充它们之间的空间的方法，如下所示：

这样每一行都有自己的颜色。根据线条的顺序 - 区域填充为一种颜色或另一种颜色（见图）。

有本地的方法吗？我发现有些人在提到extensions，但没有人提供任何关于如何从头开始编写它们的说明。我也没有在官方文档页面上找到任何示例。如果有人能指出我如何实现这一目标的正确方向，我将不胜感激。

在最坏的情况下 - 如果他们有非常需要的选项，我会接受其他图书馆。

我能做的最好的是：

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

我使用areaStyle来填充axisLine 和数据之间的区域。我会尝试通过将绿色/黄色 areaStyle 添加到绿色系列，将粉红色 areaStyle 添加到红色系列，然后将白色 areaStyle 添加到由其他两个系列的最小值组成的新系列来解决这个问题。与宽度为 0 的 lineStyle 相结合，您可以在很大程度上实现草图中的外观，但是，最小系列填充也可能会掩盖内部网格线。