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

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填充轴和数据之间的区域。 我会尝试通过将绿色/黄色 areaStyle 添加到绿色系列，将粉红色 areaStyle 添加到红色系列，然后将白色 areaStyle 添加到由其他两个系列的最小值组成的新系列来解决这个问题。 结合宽度为 0 的 lineStyle，您可以在大多数情况下实现草图中的外观，但是，最小系列填充可能也会掩盖内部网格线。