echarts-for-react中的stack line和line的区别

在使用echart时，碰到个小问题，从官方给出的line-chart的使用方法，自己实现的代码如下。

const licenseLine = {
            title: {
                text: ""
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: [
                    intl.get("samp.licenseManagement.licenseUsage.line.byodRemember"), intl.get("samp.licenseManagement.licenseUsage.line.employeeRemember"),
                    intl.get("samp.licenseManagement.licenseUsage.line.guestRemember"), intl.get("samp.licenseManagement.licenseUsage.line.byodOnline"),
                    intl.get("samp.licenseManagement.licenseUsage.line.employeeOnline"), intl.get("samp.licenseManagement.licenseUsage.line.guestOnline")
                ]
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: ['2020-03-01', '2020-03-02', '2020-03-03', '2020-03-04', '2020-03-05', '2020-03-06', '2020-03-07',
                    '2020-03-08', '2020-03-09', '2020-03-10', '2020-03-11', '2020-03-12', '2020-03-13', '2020-03-14',
                    '2020-03-15', '2020-03-16', '2020-03-17', '2020-03-18', '2020-03-19', '2020-03-20', '2020-03-21',
                    '2020-03-22', '2020-03-23', '2020-03-24', '2020-03-25', '2020-03-26', '2020-03-27', '2020-03-28',
                    '2020-03-29', '2020-03-30']
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.byodRemember"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.employeeRemember"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.guestRemember"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.byodOnline"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.employeeOnline"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [112, 54, 222, 415, 45, 138, 271, 112, 54, 222, 415, 45, 138, 271, 112, 54, 222, 415, 45, 138, 271, 112, 54, 222, 415, 45, 138, 271, 112, 54]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.guestOnline"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [89, 332, 514, 234, 732, 112, 345, 89, 332, 514, 234, 732, 112, 345, 89, 332, 514, 234, 732, 112, 345, 89, 332, 514, 234, 732, 112, 345, 89, 332]
                }
            ]
        };

在render函数中使用Ecahrt组件

 

效果图是这样的：

注意看Y轴的数值，发现跟实际tooltip中显示的值相差挺大的，感觉有点不合理。去官网看了一下代码，显示的是stack line。

stack是什么意思呢？就是堆叠的意思。也就是说我们实际显示在Y轴的值是依次的堆叠值。比如第一个点的位置时210，那么第二个点的位置应该是第一个点的值加上第二个点的值，也就是210+310=520，快接近600的那条线，说明这是正常的。

去官网搜了一下line-chart的多线图，无果。但在代码中发现了蹊跷。在下面的代码中我们可以看到series中的乜咯对象都有个"stack"属性，这个属性指向了Y轴的Numbers。也就是说这里的代码表示我要用stack来表现Numbers，那么就会叠加我们的数据。

 series: [
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.byodRemember"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.employeeRemember"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.guestRemember"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.byodOnline"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.employeeOnline"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [112, 54, 222, 415, 45, 138, 271, 112, 54, 222, 415, 45, 138, 271, 112, 54, 222, 415, 45, 138, 271, 112, 54, 222, 415, 45, 138, 271, 112, 54]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.guestOnline"),
                    type: 'line',
                    stack: 'Numbers',
                    data: [89, 332, 514, 234, 732, 112, 345, 89, 332, 514, 234, 732, 112, 345, 89, 332, 514, 234, 732, 112, 345, 89, 332, 514, 234, 732, 112, 345, 89, 332]
                }
            ]

根据上面的分析，我们可以把这个stack注释掉或者删掉，再来看一下代码：

series: [
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.byodRemember"),
                    type: 'line',
                    // stack: 'Numbers',
                    data: [120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132, 101, 134, 90, 230, 210, 120, 132]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.employeeRemember"),
                    type: 'line',
                    // stack: 'Numbers',
                    data: [220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182, 191, 234, 290, 330, 310, 220, 182]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.guestRemember"),
                    type: 'line',
                    // stack: 'Numbers',
                    data: [150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232, 201, 154, 190, 330, 410, 150, 232]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.byodOnline"),
                    type: 'line',
                    // stack: 'Numbers',
                    data: [320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332, 301, 334, 390, 330, 320, 320, 332]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.employeeOnline"),
                    type: 'line',
                    // stack: 'Numbers',
                    data: [112, 54, 222, 415, 45, 138, 271, 112, 54, 222, 415, 45, 138, 271, 112, 54, 222, 415, 45, 138, 271, 112, 54, 222, 415, 45, 138, 271, 112, 54]
                },
                {
                    name: intl.get("samp.licenseManagement.licenseUsage.line.guestOnline"),
                    type: 'line',
                    // stack: 'Numbers',
                    data: [89, 332, 514, 234, 732, 112, 345, 89, 332, 514, 234, 732, 112, 345, 89, 332, 514, 234, 732, 112, 345, 89, 332, 514, 234, 732, 112, 345, 89, 332]
                }
            ]

 

其所展示的效果图如下，可以看出这时Y轴显示的就是每一条折线图对应的实际值，而不是叠加值。