VChart
VChart copied to clipboard
[Bug] effect of `barMinHeight` is incorrect in the datazoom when set `filterMode: 'axis'`
Version
1.12.6
Link to Minimal Reproduction
none
Steps to Reproduce
const spec = {
type: 'common',
padding: 10,
layout: {
type: 'grid',
col: 2,
row: 5,
rowHeight: [
{
index: 3,
size: 100
}
],
elements: [
{
modelId: 'legend',
col: 0,
colSpan: 2,
row: 0
},
{
modelId: 'axis-left',
col: 0,
row: 1
},
{
modelId: 'axis-left-2',
col: 0,
row: 3
},
{
modelId: 'metric-region',
col: 1,
row: 1
},
{
modelId: 'axis-middle',
col: 1,
row: 2
},
{
modelId: 'event-region',
col: 1,
row: 3
},
{
modelId: 'datazoom',
col: 0,
colSpan: 2,
row: 4
},
]
},
region: [
{
id: 'metric-region'
},
{
id: 'event-region',
},
],
legends: {
visible: true,
orient: 'top',
id: 'legend',
regionId: ['event-region', 'metric-region']
},
series: [
{
id: 'metric',
regionId: 'metric-region',
type: 'area',
point: { visible: false },
xField: 'timestamp',
yField: 'value',
line: {
style: {
curveType: 'monotone'
}
},
data: {
id: 'line',
values: [
{
"timestamp": 0,
"value": 854
},
{
"timestamp": 1,
"value": 927
},
{
"timestamp": 2,
"value": 407
},
{
"timestamp": 3,
"value": 714
},
{
"timestamp": 4,
"value": 583
},
{
"timestamp": 5,
"value": 987
},
{
"timestamp": 6,
"value": 765
},
{
"timestamp": 7,
"value": 741
},
{
"timestamp": 8,
"value": 469
},
{
"timestamp": 9,
"value": 628
}
]
},
},
{
id: 'x',
regionId: 'event-region',
type: 'rangeColumn',
xField: ['startTimestamp', 'endTimestamp'],
yField: 'type',
direction: 'horizontal',
data: {
id: 'eventData',
values: [
{
"type": 2,
"startTimestamp": 0,
"endTimestamp": 0
},
{
"type": 1,
"startTimestamp": 1,
"endTimestamp": 2
},
{
"type": 0,
"startTimestamp": 3,
"endTimestamp": 5
},
{
"type": 2,
"startTimestamp": 4,
"endTimestamp": 4
}
]
},
barMinHeight:10,
barBackground: {
visible: true,
style: {
cornerRadius: [5, 5, 5, 5],
height: 10
}
},
bar: {
style: {
cornerRadius: [5, 5, 5, 5],
height: 10,
}
},
seriesField: 'type',
tooltip: { visible: false }
},
],
dataZoom: [
{
offsetX: 180,
orient: 'bottom',
id: "datazoom",
filterMode:"axis",
axisId: ['axis-middle'],
width: ({ width }) => width - 200
}
],
axes: [
{
id: 'axis-left',
regionId: 'metric-region',
orient: 'left',
label: {
flush: true
}
},
{
id: 'axis-left-2',
regionId: 'event-region',
orient: 'left',
type: "band",
visible: false
},
{
id: 'axis-middle',
regionId: ['metric-region', 'event-region'],
type: 'linear',
orient: 'bottom',
grid: { visible: false }
},
],
tooltip: {
dimension: {
visible: true
}
},
customMark: [
{
type: "rect",
style: {
width: 180,
height: 24,
fill:false,
x: 10,
y: 490,
html: () => {
const color = '#1664FF';
return {
dom: `
<button style="
margin:0;
width: 180px;
font-weight:500;
line-height: 18px;
font-size:12px;
color:#646475;
">111</button>
`
};
}
}
}
]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID,enableHtmlAttribute: true });
vchart.renderSync();
window['vchart'] = vchart;
Current Behavior
bar mark cannot be filtered by datazoom
Expected Behavior
bar mark should be filtered
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response