Skip to content

堆叠柱状图重合问题,bug? #7560

@skywalkershen

Description

@skywalkershen

One-line summary [问题简述]

绘制堆叠柱状图时发现用同样的dataset数据绘制stack bar时,根据数据矩阵各列与series的映射关系不同,会出现本该堆叠的柱状图彼此上下覆盖的现象。求解决方法,多谢!!!

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]:4.0.2 或官网demo的在线编辑模式
  • Browser version [浏览器类型和版本]: chrome Version 63.0.3239.132 (Official Build) (64-bit)
  • OS Version [操作系统类型和版本]:win10

Expected behaviour [期望结果]

柱状图以堆叠方式绘制,每个图块在前一图块的末尾开始绘制,如图所示
image

ECharts option [ECharts配置项]

var data = [
    
    //此数据的绘图结果不正常,将鼠标悬浮于各个图例上可看出各个颜色图块的实际起始,截止位置。可看出并未堆叠,而是以某种方式相互在z轴上覆盖
    ["Twitter_ID", "UserName",  "Like", "Reply","Share"]
    ,["evannex_com", "EVANNEX for Tesla", 6381, 15366, 461]
    ,["TeslaModel3News", "Tesla Model 3 News", 2878, 9876, 422]
    ,["Model3Owners", "Model 3 Owners Club", 1773, 9571, 823]
    ,["TeslaPittsburgh", "Tesla Pittsburgh", 635, 2118, 190]
    ,["XingleiShen", "Xinglei Shen", 585, 2223, 108]
    ,["techeblog", "TechEBlog", 796, 759, 0]
    ,["TeslaClubUK", "Tesla Owners Club UK", 611, 777, 159]
    ,["omg_tesla", "Omg_Tesla", 306, 1128, 97]
    ,["JimHarris", "Jim Harris", 644, 764, 35]
    ,["jassummers", "Jas Summers", 220, 800, 75]
    ,["ubuygas", "UBUYGAS", 347, 510, 34]
    ,["ElectriCarsES", "ElectriCars", 28, 714, 70]
    ,["bmwblog", "BMWBLOG", 188, 578, 24]
    ,["plugshare", "PlugShare", 152, 501, 26]
    ,["Jasonrbirchall", "Jason R Birchall", 96, 332, 170]
    ,["AmazingChevVolt", "Thomas J. Thias", 247, 287, 23]
    ,["kirillklip", "Kirill Klip", 387, 153, 9]
    ];
    
    //此数据绘制结果正常,可看出各个颜色图块分别是在前一图块绘制截止的位置后开始绘制的,堆叠效果正常
    //与上面数据的区别仅是改变了第一个数组中share, like ,reply的位置
    //使用上面显示正常的数据,在series中改变share like reply的映射顺序也会出现同样的问题
    // ["Twitter_ID", "UserName", "Share", "Like", "Reply"]
    // ,["evannex_com", "EVANNEX for Tesla", 6381, 15366, 461]
    // ,["TeslaModel3News", "Tesla Model 3 News", 2878, 9876, 422]
    // ,["Model3Owners", "Model 3 Owners Club", 1773, 9571, 823]
    // ,["TeslaPittsburgh", "Tesla Pittsburgh", 635, 2118, 190]
    // ,["XingleiShen", "Xinglei Shen", 585, 2223, 108]
    // ,["techeblog", "TechEBlog", 796, 759, 0]
    // ,["TeslaClubUK", "Tesla Owners Club UK", 611, 777, 159]
    // ,["omg_tesla", "Omg_Tesla", 306, 1128, 97]
    // ,["JimHarris", "Jim Harris", 644, 764, 35]
    // ,["jassummers", "Jas Summers", 220, 800, 75]
    // ,["ubuygas", "UBUYGAS", 347, 510, 34]
    // ,["ElectriCarsES", "ElectriCars", 28, 714, 70]
    // ,["bmwblog", "BMWBLOG", 188, 578, 24]
    // ,["plugshare", "PlugShare", 152, 501, 26]
    // ,["Jasonrbirchall", "Jason R Birchall", 96, 332, 170]
    // ,["AmazingChevVolt", "Thomas J. Thias", 247, 287, 23]
    // ,["kirillklip", "Kirill Klip", 387, 153, 9]
    // ];
    
 //此数据绘制结果不正常,share与like是以堆叠的方式绘制的,reply则是从share的截止位置开始绘制,覆盖了like   
//     ['Time', 'Share','Like','Reply']
//     ,['2017-08-10',436,45,45]
//     ,['2017-08-09',46,45,425]
//     ,['2017-08-08',36,45,420]
//     ,['2017-08-07',136,15,13]
//     ,['2017-08-06',36,15,12]
    
//     ,['2015-06-01',56,55,52]
//     ,['2014-08-10',36,35,35]
//     ,['2014-08-09',26,25,28]
//     ,['2014-08-08',36,454,423]
//     ,['2014-08-07',236,25,24]
//     ,['2014-08-06',26,252,28]
//     ,['2014-06-05',236,255,25]
//     ,['2014-06-04',26,25,27]
//     ,['2014-06-03',536,55,542]
//     ,['2014-06-02',56,55,54]
//     ,['2014-06-01',56,55,53]
// ];

option = {
    legend:{},
    tooltip : {
        trigger: 'axis',
        axisPointer : {            // 坐标轴指示器,坐标轴触发有效
            type : 'shadow'        // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    
    grid: {
        left: '20%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    
    xAxis:  {
        
    },
    yAxis: {
        type: 'category',
        
    },
    dataset:{
      source:data  
    },
    series: [
        {
            
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
             name:'Reply',
            encode:{
                x:'Reply',
                y: 'Time'
            }
            
        },
        {
            
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            name:'Share',
            encode:{
                x:'Share',
                y: 'Time'
            }
            
        },
        {
            
            type: 'bar',
            stack: '总量',
            label: {
                normal: {
                    show: true,
                    position: 'insideRight'
                }
            },
            name:'Like',
            encode:{
                x:'Like',
                y: 'Time'
            }
           
            
        },
        
    ]
};

Other comments [其他信息]

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions