在特定阈值之后（超出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演示库来创建一个小演示，并用上面的片段替换系列和图例数据（您可能必须单击蓝色的运行按钮）。