VChart
VChart copied to clipboard
[Feature] 框选在空白区域时不选中内容
What problem does this feature solve?
当前刷选操作刷选在空白数据时,startValue 和 endValue 会变成第一个数值,期望能够提供一个配置项来控制这一默认表现,在操作空白区域时 dataZoomChange 不触发。
What does the proposed API look like?
- emptyBrush: 'none' | 'closestValue'
spec
const spec = {
type: 'line',
data: {
values: [
{time: 1720339200000, value: 7, legend: '优秀'},
{time: 1720339800000, value: 37, legend: '优秀'},
{time: 1720340400000, value: 10, legend: '优秀'},
{time: 1720341000000, value: 37, legend: '优秀'},
{time: 1720341600000, value: 37, legend: '优秀'},
{time: 1720342200000, value: 37, legend: '优秀'},
{time: 1720342800000, value: 3, legend: '优秀'},
{time: 1720343400000, value: 37, legend: '优秀'},
{time: 1720344000000, value: 3, legend: '优秀'},
{time: 1720345800000, value: 3, legend: '优秀'},
{time: 1720346400000, value: 37, legend: '优秀'},
{time: 1720347000000, value: 37, legend: '优秀'},
{time: 1720347600000, value: 3, legend: '优秀'},
{time: 1720348200000, value: 37, legend: '优秀'},
]
},
xField: 'time',
yField: 'value',
axes:[
{
orient:'bottom',
type: 'time',
layers: [
{
// 格式化x时间轴
timeFormat: '%m/%d %H:%M',
},
],
min:1720334200000,
max:1720349800000
}
],
brush:{
visible: true,
brushType: 'x',
// 开启后默认关联所有axis/dataZoom
zoomAfterBrush: true,
brushMoved: false, // 选框是否可被平移
delayType: 'throttle',
style: {
shadowColor: '#1664FF1A',
lineWidth: 0.5,
},
},
dataZoom: [
{
orient: 'bottom',
showDetail: false,
visible: false,
},
],
crosshair: {
xField: {
visible: true,
line: {
type: 'line',
},
},
},
point:{
style:{
size:4
},
state: {
dimension_hover: {
size: 10,
},
},
},
tooltip:{
dimension:{
visible: (a, b, c) => {
return a[0].value > 1720339200000 && a[0].value < 1720348200000;
},
title: {
valueTimeFormat: '%Y-%m-%d %H:%M:%S',
},
content: {
key: (datum) => datum.legend,
value: (datum) => {
return datum.value;
}
},
}
},
line: {
style: {
lineWidth: 2
}
},
legends: { visible: true }
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
vchart.on('dataZoomChange', (args) => {
console.log(args.value);
});
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
@purpose233 spec 也更新一下吧