Cluster bar chart overlapping with date xaxis #11145
Description
Version
4.1.0-release
Steps to reproduce
when using adaptive barWidth with a clustered bar chart and date x-axis, bars of 2 adjacent clusters can overlap when playing with the area zoom slider.
You can find below an example to reproduce the problem on https://echarts.apache.org/examples/en/editor.html
- Once loaded, you'll have 6 groups of 4 bars each.
2.Start zooming-in until you have 1 group and then zoom out/in. - You can notice that the groups overlaps.
var posList = [
'left', 'right', 'top', 'bottom',
'inside',
'insideTop', 'insideLeft', 'insideRight', 'insideBottom',
'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight'
];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: echarts.util.reduce(posList, function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
var labelOption = {
normal: {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
}
};
myChart.setOption({
series: [{
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}, {
label: labelOption
}]
});
}
};
var labelOption = {
normal: {
show: false,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {
textBorderColor: '#fff'
}
}
}
};
option = {
"dataZoom":[
{
"type":"slider",
"show":true,
"height":25,
"backgroundColor":"transparent",
"fillerColor":"rgba(63, 81, 181, 0.05)",
"handleStyle":{
"color":"rgba(63, 81, 181, 0.2)"
},
"zlevel":0,
"z":4,
"orient":"horizontal",
"xAxisIndex":[
0
],
"yAxisIndex":[
],
"filterMode":"filter",
"throttle":20,
"start":0,
"end":100,
"startValue":1495756800000,
"endValue":1496188800000,
"minSpan":null,
"maxSpan":null,
"minValueSpan":null,
"maxValueSpan":null,
"rangeMode":null,
"right":"ph",
"top":"ph",
"width":"ph",
"left":null,
"bottom":null,
"dataBackground":{
"lineStyle":{
"color":"#2f4554",
"width":0.5,
"opacity":0.3
},
"areaStyle":{
"color":"rgba(47,69,84,0.3)",
"opacity":0.3
}
},
"borderColor":"#ddd",
"handleIcon":"M8.2,13.6V3.9H6.3v9.7H3.1v14.9h3.3v9.7h1.8v-9.7h3.3V13.6H8.2z M9.7,24.4H4.8v-1.4h4.9V24.4z M9.7,19.1H4.8v-1.4h4.9V19.1z",
"handleSize":"100%",
"labelPrecision":null,
"labelFormatter":null,
"showDetail":true,
"showDataShadow":"auto",
"realtime":true,
"zoomLock":false,
"textStyle":{
"color":"#333"
},
"zAxisIndex":[
],
"radiusAxisIndex":[
],
"angleAxisIndex":[
],
"singleAxisIndex":[
]
}
],
color: ['#003366', '#006699', '#4cabce', '#e5323e'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['Forest', 'Steppe', 'Desert', 'Wetland']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: {show: true},
dataView: {show: true, readOnly: false},
magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
restore: {show: true},
saveAsImage: {show: true}
}
},
calculable: true,
xAxis: [
{
type: 'time',
axisTick: {show: false},
data: [new Date('2017-03-01'), new Date('2017-03-02'), new Date('2017-03-03'), new Date('2017-03-04'), new Date('2017-03-05'), new Date('2017-03-06'), new Date('2017-03-06')]
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: 'Forest',
type: 'bar',
barGap: 0,
label: labelOption,
data: [["2017-05-26T00:00:00.000Z",320], ["2017-05-25T00:00:00.000Z",340], ["2017-05-24T00:00:00.000Z",310], ["2017-05-23T00:00:00.000Z",320], ["2017-05-22T00:00:00.000Z",330], ["2017-05-21T00:00:00.000Z",320], ["2017-05-20T00:00:00.000Z",340]]
},
{
name: 'Steppe',
type: 'bar',
label: labelOption,
data: [["2017-05-26T00:00:00.000Z",240], ["2017-05-25T00:00:00.000Z",320], ["2017-05-24T00:00:00.000Z",315], ["2017-05-23T00:00:00.000Z",320], ["2017-05-22T00:00:00.000Z",290], ["2017-05-21T00:00:00.000Z",340], ["2017-05-20T00:00:00.000Z",330]]
},
{
name: 'Desert',
type: 'bar',
label: labelOption,
data: [["2017-05-26T00:00:00.000Z",512], ["2017-05-25T00:00:00.000Z",280], ["2017-05-24T00:00:00.000Z",290], ["2017-05-23T00:00:00.000Z",320], ["2017-05-22T00:00:00.000Z",320], ["2017-05-21T00:00:00.000Z",350], ["2017-05-20T00:00:00.000Z",320]]
},
{
name: 'Wetland',
type: 'bar',
label: labelOption,
data: [["2017-05-26T00:00:00.000Z",455], ["2017-05-25T00:00:00.000Z",290], ["2017-05-24T00:00:00.000Z",300], ["2017-05-23T00:00:00.000Z",320], ["2017-05-22T00:00:00.000Z",320], ["2017-05-21T00:00:00.000Z",370], ["2017-05-20T00:00:00.000Z",310]]
}
]
};
What is expected?
Bars are not overlapping
What is actually happening?
Bars of 2 adjacent clusters are overlapping.