VChart
VChart copied to clipboard
VisActor
[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
如下设置，图表右侧位置不会发生偏移，但 rotate 从 45 度变为 0 度时，x 轴 label 还会占据空间，请帮忙看看是否可以让 label 在 rotate 0 度时，不占据 45 度的空间？
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'],
trimPadding: true,
// sampling: false,
label: {
flush: true,
autoHide: true,
autoRotate: true,
autoLimit: true,
},
}],
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;
如下设置，图表右侧位置不会发生偏移，但 rotate 从 45 度变为 0 度时，x 轴 label 还会占据空间，请帮忙看看是否可以让 label 在 rotate 0 度时，不占据 45 度的空间？
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'], trimPadding: true, // sampling: false, label: { flush: true, autoHide: true, autoRotate: true, autoLimit: true, }, }], 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;
请问有没有大佬看看这个问题？