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

Question

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

这是预期的输出类型 -

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>

Answer 1

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

我仍在寻找一个优雅的解决方案，如果有人 post 会非常感激。

我正在分享我的代码，它可以帮助那些打算使用 e-charts 获得类似效果的人。

谢谢。

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>

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

How to render Positive, Negative differences as area between two lines in eCharts?

javascript

visualization

echarts