echarts - 如何在某个阈值后拆分折线图下区域的颜色（超出 x 轴）

Question

我在用百度的echarts库

如何使用 areastyle 在某个阈值（超出 x 轴）之后分割折线图下区域的颜色？

谢谢！

Answer 1

你不能。

areastyle 应用于系列本身，不能绑定到单个数据点。因为区域颜色实际上标记了两个数据点之间的区域。

但是..，但是，您可以创建一个解决方法并创建两个折线图，如下所示：

legend: {
    data: ['myLine']
},
series : [
    {
        name: 'myLine',
        type: 'line',
        areaStyle: {
            normal: {
                color: 'red'
            }
        },
        data: [400, 300, 101, 134, null, null, null]
    },
    {
        name: 'myLine',
        type: 'line',
        areaStyle: {
            normal: {
                color: 'green'
            }
        },
        data: [null, null, null, 134, 90, 230, 210]
    },
]

通过手动将其添加到图例中，并为两个系列赋予相同的名称。ECharts在某种程度上将这两个系列结合起来，所以无论是图例还是动画都像是一个系列。

此外，请确保通过两次添加数据点来连接两条线（请参阅 参考资料134）。您可以使用 等对线条进行更多自定义lineStyle，以使它们看起来更好。

---

您可以通过查看ECharts 演示库来创建一个小演示，并将系列和图例数据替换为上面的代码片段（您可能需要单击蓝色的运行按钮）。