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

Posted 2023-03-25

【中文标题】如何在某个阈值后拆分折线图下区域的颜色（超出 x 轴）

【英文标题】：How can I split colors of the area under line chart after a certain threshold (beyond x-axis)

【发布时间】：2017-12-23 09:47:16

【问题描述】：

我正在使用Baidu's echarts library

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

谢谢！

【问题讨论】：

gallery.echartsjs.com/editor.html?c=line-aqi 看看这是否有帮助。

【参考方案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 等对线条进行更多自定义，使其看起来更好。

---

您可以通过检查the ECharts demo gallery 来创建一个小演示，并将系列和图例数据替换为上面的sn-p（您可能需要单击蓝色的运行按钮）。