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

Posted 2023-03-25

【中文标题】百度的 echarts - 填满两行之间的空间

【英文标题】：Baidu's echarts - filling up space between 2 lines

【发布时间】：2019-04-15 17:02:05

【问题描述】：

我想找到一种方法，如何在 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);

【参考方案1】：

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