VChart
VChart copied to clipboard
缩略轴大数据量场景下,如何支持标签布局(自动省略、自动旋转)且拖动不卡顿?
需求: 图表数据量很大,且轴标签文本过长,想使用自动省略布局,但需要设置 sampling: false,从而导致缩略轴拖动有卡顿现象。
卡顿 demo: https://codesandbox.io/p/sandbox/hopeful-ritchie-dpr2ld?file=%2Fsrc%2Findex.ts
官方 demo:(缩略轴支持大数据量场景下交互) https://visactor.io/vchart/demo/data-zoom/data-zoom-big-data
spec 参数:
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: 'right',
seriesId: 'area2'
},{
orient: 'bottom',
type: 'band',
sampling: false, // 改动的地方
tick: {visible: false}, // 改动的地方
label: { // 改动的地方
autoHide: true,
autoHideMethod: 'parity',
autoRotate: true,
autoLimit: true,
},
seriesId: ['area1', 'area2']
}],
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;
这个问题有大佬看吗?期望5.1 前修复