VChart
VChart copied to clipboard
[Bug] 拖动缩略轴,图表右侧位置变了
Version
1.10.5
Link to Minimal Reproduction
https://www.visactor.io/vchart/demo/data-zoom/data-zoom-big-data?version=1.10.5
Steps to Reproduce
1、复制如下代码覆盖该链接的代码 https://www.visactor.io/vchart/demo/data-zoom/data-zoom-big-data?version=1.10.5
const responseOrder = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/order-count-data.json');
const dataOrder = await responseOrder.json();
const responseProfit = await fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/profit-count-data.json');
const dataProfit = await responseProfit.json();
const spec = {
color: [
'#33ADFF',
'#FFCF33',
'#FFA763',
'#9F97FF',
'#FF97BC'
],
type: 'common',
series: [{
id: 'area1',
type: 'area',
dataId: 'areaData1',
xField: 'time',
yField: 'value',
point: {
visible: false
},
area: {
style: {
fillOpacity: 0.2,
lineWidth: 1
}
},
name: '成交订单数'
}, {
id: 'area2',
type: 'area',
dataId: 'areaData2',
xField: 'time',
yField: 'value',
point: {
visible: false
},
area: {
style: {
fillOpacity: 0.2,
lineWidth: 1
}
},
name: '成交金额'
}],
axes: [{
orient: 'left',
seriesId: 'area1'
},{
orient: 'bottom',
type: 'band',
seriesId: ['area1']
}],
dataZoom: [
{
orient: 'bottom',
start: 0.95,
end: 1,
// maxSpan: 0.05,
tolerance: 4,
selectedBackgroundChart: {
area: {
visible: false,
style: {
visible: false
}
},
line: {
visible: false,
style: {
visible: false
}
}
}
}
],
data: [
{
id: 'areaData1',
values: dataOrder
},
{
id: 'areaData2',
values: dataProfit
}
]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
2、拖动左侧缩略轴手柄向左侧移动
3、会发现图表右侧向左偏移
Current Behavior
拖动缩略轴左侧手柄向左侧移动时,图表右侧位置发生了变化
Expected Behavior
缩略轴拖动时,不影响视觉效果上的图表大小
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response