百度eacharts柱状图问题

[自渡96]

如下图，希望有个类似按钮的控件可以显/去除指定的柱(如去除下图中的mon的数据)，看了文档好像没办法实现，是这样吗？

[cvjar]

可以 改变数据，重新渲染就好了

[jio可]

可以自己在下面写一个对应的button组和上面的柱子对应，点击改变颜色灰色同时修改柱状图的data数据为空，点击灰色按钮可以显示隐藏的数据

[jio可]

https://www.echartsjs.com/examples/zh/editor.html?c=dataset-simple1 这个其实就可以，自己写一个也是这样操作

[自渡96]

引用 1 楼 cvjar 的回复:

可以 改变数据，重新渲染就好了

这个方法我知道，也是这么打算的，就是来论坛问问有没有更好的方法

[自渡96]

引用 3 楼 三岁打酱油 的回复:

https://www.echartsjs.com/examples/zh/editor.html?c=dataset-simple1 这个其实就可以，自己写一个也是这样操作

这个好像不太行，怎么改都不对

[自渡96]

引用 2 楼 三岁打酱油 的回复:

可以自己在下面写一个对应的button组和上面的柱子对应，点击改变颜色灰色同时修改柱状图的data数据为空，点击灰色按钮可以显示隐藏的数据

有类似的想法，就是来论坛问问有没有更好的方法

[jio可]

应该都是这样做的，点击传参过滤数据显示新数据

[NANU-NANA]

itemStyle : {
              normal : {
                         label : {
                                   show : false
                                  },
                         labelLine : {
                                       show : false
                                      }
                         }
              }

也可以用css变量控制。

[Hello World,]

想到两个方案，一个是利用barGap来将不同系列的值重叠（下面的坐标是系列名称格式化出来的），另外一种是使用堆叠，隐藏时系列的位置不消失

[Hello World,]

图一的代码：

option = {
    legend: {
        show:true,
        data:['a','b','c','d']
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        splitLine: {show: false}
    },
    animationDurationUpdate: 1200,
    series: [{
        name:'a',
        type: 'bar',
        label:{
            show:true,
            position:'bottom',
            formatter: '{a}'
        },
        barWidth: 100,
        barGap:'-100%',
        data: [60]
    }, {
        name:'b',
        type: 'bar',label:{show:true,position:'bottom',formatter: '{a}'},
        barWidth: 100,
        data: ['-', 260]
    }, {
        name:'c',
        type: 'bar',label:{show:true,position:'bottom',formatter: '{a}'},
        barWidth: 100,
        data: ['-', '-', 90]
    }, {
        name:'d',
        type: 'bar',label:{show:true,position:'bottom',formatter: '{a}'},
        barWidth: 100,
        data: ['-', '-','-',160]
    }]
};

图二的代码：

option = {
    legend: {
        show:true,
        data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
    },xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    tooltip:{
        show:true
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        stack:'Week',
        type:'bar',
        name:'Mon',
        data:[90]
    },{
        stack:'Week',
        type:'bar',
        name:'Tue',
        data:[0,200]
    },{
        stack:'Week',
        type:'bar',
        name:'Wed',
        data:[0,0,120]
    },{
        stack:'Week',
        type:'bar',
        name:'Thu',
        data:[0,0,0,50]
    },{
        stack:'Week',
        type:'bar',
        name:'Fri',
        data:[0,0,0,0,88]
    },{
        stack:'Week',
        type:'bar',
        name:'Sat',
        data:[0,0,0,0,0,99]
    },{
        stack:'Week',
        type:'bar',
        name:'Sun',
        data:[0,0,0,0,0,0,230]
    }]
};

[Hello World,]

参考系列a的标签设置：

option = {
    legend: {
        show:true,
        data:['a','b','c','d']
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        splitLine: {show: false}
    },
    animationDurationUpdate: 1200,
    series: [{
        name:'a',
        type: 'bar',
        label:{
            show:true,
            position:'bottom',
            distance:-30,
            formatter: function(params){
                console.log(params)
                return '{data|' + params.data + '}\n\n{name|' +  params.seriesName +'}'
            },
            rich:{
                data:{
                    color:'#fff',
                    align:'center',
                    fontSize:18
                },
                name:{
                    color:'#000',
                    align:'center',
                    fontSize:40
                }
            }
        },
        barWidth: 100,
        barGap:'-100%',
        data: [160]
    }, {
        name:'b',
        type: 'bar',label:{show:true,position:'bottom',formatter: '{a}'},
        barWidth: 100,
        data: ['-', 260]
    }, {
        name:'c',
        type: 'bar',label:{show:true,position:'bottom',formatter: '{a}'},
        barWidth: 100,
        data: ['-', '-', 90]
    }, {
        name:'d',
        type: 'bar',label:{show:true,position:'bottom',formatter: '{a}'},
        barWidth: 100,
        data: ['-', '-','-',160]
    }]
};

[Hello World,]

如果标签设置都一样就用变量来设置：

var labelFormatter={
            show:true,
            position:'bottom',
            distance:-30,
            formatter: function(params){
                console.log(params)
                return '{data|' + params.data + '}\n\n{name|' +  params.seriesName +'}'
            },
            rich:{
                data:{
                    color:'#fff',
                    align:'center',
                    fontSize:18
                },
                name:{
                    color:'#000',
                    align:'center',
                    fontSize:40
                }
            }
        };
option = {
    legend: {
        show:true,
        data:['a','b','c','d']
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        splitLine: {show: false}
    },
    animationDurationUpdate: 1200,
    series: [{
        name:'a',
        type: 'bar', label:labelFormatter,
        barWidth: 100, barGap:'-100%',
        data: [160]
    }, {
        name:'b',
        type: 'bar',label:labelFormatter,
        barWidth: 100, data: ['-', 260]
    }, {
        name:'c',
        type: 'bar',label:labelFormatter,
        barWidth: 100, data: ['-', '-', 90]
    }, {
        name:'d',
        type: 'bar',label:labelFormatter,
        barWidth: 100, data: ['-', '-','-',160]
    }]
};

[Hello World,]

[自渡96]

引用 14 楼 Hello World, 的回复:

厉害！！！！，你这是把eacharts研究的多透彻啊

[Hello World,]

还可以用markPoint来显示：

var labelFormatter={
            show:true,
            position:'bottom',
            distance:-30,
            formatter: function(params){
                return '{data|' + params.data + '}\n\n{name|' +  params.seriesName +'}'
            },
            rich:{
                data:{
                    color:'#fff',
                    align:'center',
                    fontSize:18
                },
                name:{
                    color:'#000',
                    align:'center',
                    fontSize:40
                }
            }
        };
var markPointFormatter={
            symbolSize: 1,
            symbolOffset: [0, '50%'],
            label:{
                normal:{
                    position:'top',
                    distance:-30,
                    show:true,
                    formatter:function(params){
                        return '{value|' + params.value + '}';
                    },
                    rich:{
                        value:{
                            color:'#fff',
                            fontSize:20
                        }
                    }
                }
            },
            data: [{type: 'max', name: 'max days: '}]
        };
option = {
    legend: {
        show:true,
        data:['a','b','c','d']
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        splitLine: {show: false}
    },
    animationDurationUpdate: 1200,
    series: [{
        name:'a',
        type: 'bar', label:labelFormatter,
        barWidth: 100, barGap:'-100%',
        data: [160],
        markPoint:markPointFormatter
    }, {
        name:'b',barGap:'-100%',
        type: 'bar',label:labelFormatter,
        barWidth: 100, data: ['-', 260],
        markPoint:markPointFormatter
    }, {
        name:'c',barGap:'-100%',
        type: 'bar',label:labelFormatter,
        barWidth: 100, data: ['-', '-', 90],
        markPoint:markPointFormatter
    }, {
        name:'d',barGap:'-100%',
        type: 'bar',label:labelFormatter,
        barWidth: 100, data: ['-', '-','-',160],
        markPoint:markPointFormatter
    }]
};

[自渡96]

引用 9 楼 Hello World, 的回复:

图一的代码：

option = {
    legend: {
        show:true,
        data:['a','b','c','d']
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        splitLine: {show: false}
    },
    animationDurationUpdate: 1200,
    series: [{
        name:'a',
        type: 'bar',
        label:{
            show:true,
            position:'bottom',
            formatter: '{a}'
        },
        barWidth: 100,
        barGap:'-100%',
        data: [60]
    }, {
        name:'b',
        type: 'bar',label:{show:true,position:'bottom',formatter: '{a}'},
        barWidth: 100,
        data: ['-', 260]
    }, {
        name:'c',
        type: 'bar',label:{show:true,position:'bottom',formatter: '{a}'},
        barWidth: 100,
        data: ['-', '-', 90]
    }, {
        name:'d',
        type: 'bar',label:{show:true,position:'bottom',formatter: '{a}'},
        barWidth: 100,
        data: ['-', '-','-',160]
    }]
};

图二的代码：

option = {
    legend: {
        show:true,
        data:['Mon','Tue','Wed','Thu','Fri','Sat','Sun']
    },xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    tooltip:{
        show:true
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        stack:'Week',
        type:'bar',
        name:'Mon',
        data:[90]
    },{
        stack:'Week',
        type:'bar',
        name:'Tue',
        data:[0,200]
    },{
        stack:'Week',
        type:'bar',
        name:'Wed',
        data:[0,0,120]
    },{
        stack:'Week',
        type:'bar',
        name:'Thu',
        data:[0,0,0,50]
    },{
        stack:'Week',
        type:'bar',
        name:'Fri',
        data:[0,0,0,0,88]
    },{
        stack:'Week',
        type:'bar',
        name:'Sat',
        data:[0,0,0,0,0,99]
    },{
        stack:'Week',
        type:'bar',
        name:'Sun',
        data:[0,0,0,0,0,0,230]
    }]
};

你的方法很好用，图一的代码我如果想在柱状图中显示具体数据，该如何实现啊？

[自渡96]

引用 16 楼 Hello World, 的回复:

还可以用markPoint来显示：

var labelFormatter={
            show:true,
            position:'bottom',
            distance:-30,
            formatter: function(params){
                return '{data|' + params.data + '}\n\n{name|' +  params.seriesName +'}'
            },
            rich:{
                data:{
                    color:'#fff',
                    align:'center',
                    fontSize:18
                },
                name:{
                    color:'#000',
                    align:'center',
                    fontSize:40
                }
            }
        };
var markPointFormatter={
            symbolSize: 1,
            symbolOffset: [0, '50%'],
            label:{
                normal:{
                    position:'top',
                    distance:-30,
                    show:true,
                    formatter:function(params){
                        return '{value|' + params.value + '}';
                    },
                    rich:{
                        value:{
                            color:'#fff',
                            fontSize:20
                        }
                    }
                }
            },
            data: [{type: 'max', name: 'max days: '}]
        };
option = {
    legend: {
        show:true,
        data:['a','b','c','d']
    },
    xAxis: {
        type: 'category'
    },
    yAxis: {
        splitLine: {show: false}
    },
    animationDurationUpdate: 1200,
    series: [{
        name:'a',
        type: 'bar', label:labelFormatter,
        barWidth: 100, barGap:'-100%',
        data: [160],
        markPoint:markPointFormatter
    }, {
        name:'b',barGap:'-100%',
        type: 'bar',label:labelFormatter,
        barWidth: 100, data: ['-', 260],
        markPoint:markPointFormatter
    }, {
        name:'c',barGap:'-100%',
        type: 'bar',label:labelFormatter,
        barWidth: 100, data: ['-', '-', 90],
        markPoint:markPointFormatter
    }, {
        name:'d',barGap:'-100%',
        type: 'bar',label:labelFormatter,
        barWidth: 100, data: ['-', '-','-',160],
        markPoint:markPointFormatter
    }]
};

厉害厉害