ECharts 折线图数据堆叠问题解决方法

最新推荐文章于 2025-08-11 10:38:23 发布

不知名程序媛

最新推荐文章于 2025-08-11 10:38:23 发布

阅读量2.3w

点赞数 19

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/weixin_44606217/article/details/95304739

博客介绍了数据堆叠现象，如第2条数据值等于第1条与第2条数据值之和等。通过折线图示例，发现华夏实际值与图表点值不符，表明存在数据堆叠。给出解决方法，即去掉series中stack属性或设置为不同值，去掉后图表数值恢复正常。

数据堆叠即：

第2条数据值 = 第1条数据值 + 第2条数据值

第3条数据值 = 第2条数据值 + 第3条数据值

...

以此类推

部分代码及其图表如下：

var option={
        title: {
        text: '折线图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer:{
            type:'cross',
        }
    },
    legend: {
        data:['富国','易方达','嘉实','南方','华夏']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}    //下载为图片
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: true,     //控制折线起点
        data: ['week1','week2','week3','week4'],
    },
    yAxis: {
        name:'数值',
        type: 'value',
        min:0,    // y轴刻度最小值
        max:2000,    // y轴刻度最大值
        splitNumber:10,   // y轴刻度间隔个数
    },
    series: [
        {
            name:'富国',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134],
        },
        {
            name:'易方达',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234],
        },
        {
            name:'嘉实',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154],
        },
        {
            name:'南方',
            type:'line',
            stack: '总量',
            data:[320, 332, 301, 334],
        },
        {
            name:'华夏',
            type:'line',
            stack: '总量',
            data:[920, 932, 901, 934]
        }
    ]
    };