New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
skywalkershen opened this Issue Jan 22, 2018 · 4 comments

Comments

Projects
None yet
4 participants
@skywalkershen
Copy link

skywalkershen commented Jan 22, 2018

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 [其他信息]

@pissang

This comment has been minimized.

Copy link
Contributor

pissang commented Jan 22, 2018

谢谢反馈,我们正在修复这个问题

@skywalkershen

This comment has been minimized.

Copy link
Author

skywalkershen commented Jan 22, 2018

呃,请问这是与dataset有关吗?直接通过series向图填入数据是否可行?多谢

@pissang

This comment has been minimized.

Copy link
Contributor

pissang commented Jan 22, 2018

@skywalkershen 直接在 series 里填入数据是可以的

@100pah 100pah added the bug label Jan 22, 2018

@amily4555

This comment has been minimized.

Copy link

amily4555 commented Feb 5, 2018

dataset stack 不能显示正确堆叠图 这个bug 什么时候可以修好 并发布在线?

@100pah 100pah closed this in bf0df08 Feb 8, 2018

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment