如何在 eCharts 中将正负差异呈现为两条线之间的区域？答案

【问题标题】：How to render Positive, Negative differences as area between two lines in eCharts?如何在 eCharts 中将正负差异呈现为两条线之间的区域？
【发布时间】：2023-01-25 15:56:58
【问题描述】：

如果我们有两个折线图，比较“我的投资组合”与“整体投资组合”，两条线之间的区域需要突出显示为绿色，即“我的投资组合”大于“整体投资组合”，红色则为“少”。

这是预期的输出类型 -

var chartDom = document.getElementById('profileAumChart');
var myChart = echarts.init(chartDom);
var option;

option = {
title: {
    show: false
},
tooltip: {
    trigger: 'axis'
},
legend: {
    data: ['My Portfolio', 'Overall Portfolio']
},
grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
},
toolbox: {
    show: false
},
xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['Jan-21','Feb-21','Mar-21','Apr-21','May-21', 'Jun-21', 'Jul-21', 'Aug-21', 'Sep-21', 'Oct-21', 'Nov-21', 'Dec-21']
},
yAxis: {
    type: 'value'
},
series: [
    {
        name: 'My Portfolio',
        type: 'line',
        areaStyle: {
            color: 'green',
            //opacity: 1,
        },

        data: [150100,175965,185385,201384,206279,235905,238021,239323,245282,247671,255447,275911],
    },
    {

        name: 'Overall Portfolio',
        type: 'line',
        areaStyle: {
            color:'red',

            //opacity:1
        },

        data: [155066,165142,190811,192906,231941,250216,270047,288033,291842,308232,320941,334013],
    }
]
};

option && myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<div id="profileAumChart" style="width:100%; height:270px;"></div>

【问题讨论】：

标签： javascript visualization echarts

【解决方案1】：

我能够通过破解复制效果。我添加了两个系列中最低的隐藏系列，并使用属性“areastyle”及其子属性颜色和不透明度以及 z-index，我能够显示这样的区域。

我仍在寻找一个优雅的解决方案，如果有人发布它，我将不胜感激。

我正在分享我的代码，它可以帮助那些打算使用电子图表产生类似效果的人。

谢谢。

var chartDom = document.getElementById('profileMonthlyNetSales');
            var myChart = echarts.init(chartDom);
            var option;

            option = {
            title: {
                show: false
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ['My Portfolio', 'Overall Portfolio'],
                left: 'left'
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                show: false
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                axisLabel:{
                    margin: 20,
                },
                data: ['Jan-21','Feb-21','Mar-21','Apr-21','May-21', 'Jun-21', 'Jul-21', 'Aug-21', 'Sep-21', 'Oct-21', 'Nov-21', 'Dec-21']
            },
            yAxis: [{
                type: 'value',
                min: -15000,
                offset: 10,
                axisLabel: {
                    //formatter: '${value}M'
                    formatter: function (value, index) {
                        return '$' + (value/1000) + 'k';
                    }
                }
            }
            ],
            series: [
                {
                    z:-1,
                    name: 'My Portfolio',
                    type: 'line',
                    
                    areaStyle: {
                        color: 'green',
                        opacity:0.25,
                        origin: "start",
                        
                    },
                    symbolSize: 5,
                    emphasis:{
                        disabled:true
                    },
                    data: [-6000,-1000,-7500,-7500,15300,16000,4900,5000,800, -9800, -10000, -9000],
                },
                {
                    z:-1,
                    name: 'Overall Portfolio',
                    type: 'line',
                    color: "#808080",
                    areaStyle: {
                        color:'red',
                        opacity: 0.25,
                        origin: "start",
                    },
                    symbolSize: 5,
                    emphasis:{
                        disabled:true
                    },
                    data: [-3000,-4000,-3700,-5000,15000,14800,5000,10200,5000,-9800,-1000,-8000],
                },
                {
                    z:-1,
                    name: 'Overall Portfolio1',
                    tooltip: {
                        show: false
                    },
                    type: 'line',
                    areaStyle: {
                        color:"white",
                        opacity:1.0, 
                        origin: "start",
                    },
                    lineStyle: {
                        opacity: 0,
                    },
                    emphasis:{
                        disabled:true
                    },
                    symbolSize: 0,
                    data: [-6000,-4000,-7500,-7500,15000,14800,4900,5000,800,-9800,-10000,-9000],
                }
            ],
            
            };

            option && myChart.setOption(option);

<script src="https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.min.js"></script>
<div id="profileMonthlyNetSales" style="width:100%; height:270px;"></div>

【讨论】：

这是个好主意，但这仅在所有线交点都在数据点处时才有效（至少对于我的场景而言，我试图从 x 轴线向上填充颜色）。我将最终计算我的数据的交叉点，并在那里创建额外的点......这似乎也是一个 hacky 解决方法，但至少它会起作用。如果 eCharts 为此支持某种剪贴蒙版方法，那就太好了。

【解决方案2】：

我最终做了类似于@Amit Pandey 所做的事情，但使用了堆积面积图。

https://echarts.apache.org/examples/en/editor.html?c=area-stack

您找到 2 点中的最小值，并将其呈现为底线/区域，然后将另一个面积图堆叠在该底线的顶部（此堆叠图的值是最小值与“实际”值之间的差值）图表值）。然后，您可以将堆叠图表的颜色更改为您想要的任何颜色，并且可以直观地看到这种差异。

这仍然没有解决线相交的问题 - 所以如果你真的想让它看起来不错，你仍然必须计算交点并将这些点添加进去 - 我最终使用 mathjs' 相交函数来做到这一点。

【讨论】：