Closed
Description
Version
latest
Link to Minimal Reproduction
none
Steps to Reproduce
const list = [
{ status: 'A', label: '提交成功', color: '#a9a9a9' },
{ status: 'B', label: '正在执行', color: '#0097e0' },
{ status: 'C', label: '暂停', color: '#057c72' },
{ status: 'D', label: '失败', color: '#F13939' },
{ status: 'E', label: '成功', color: '#95DF96' },
{ status: 'F', label: '需要容错', color: '#FF8C00' }
];
const data = [
{
start_time: 1681926000,
end_time: 1681926000,
type: 'TOP 1',
status: 'A',
id: 'a90292870-9282',
useTime: '100ms'
},
{
start_time: 1681926000,
end_time: 1681959600,
type: 'TOP 2',
status: 'B',
id: 'a90292870-9282',
useTime: '100ms'
},
{
start_time: 1681925400,
end_time: 1681974000,
type: 'TOP 3',
status: 'C',
id: 'a90292870-9282',
useTime: '100ms'
},
{
start_time: 1681924800,
end_time: 1681933200,
type: 'TOP 4',
status: 'D',
id: 'a90292870-9282',
useTime: '100ms'
},
{
start_time: 1681959600,
end_time: 1681963200,
type: 'TOP 5',
status: 'E',
id: 'a90292870-9282',
useTime: '100ms'
}
// {
// start_time: 1681970400,
// end_time: 1681971000,
// type: 'TOP 5',
// status: 'F',
// id: 'a90292870-9282',
// useTime: '100ms'
// },
// {
// start_time: 1681992000,
// end_time: 1681992600,
// type: 'TOP 5',
// status: 'G',
// useTime: '100ms'
// },
// {
// start_time: 1681956000,
// end_time: 1681963200,
// type: 'TOP 6',
// status: 'H',
// id: 'a90292870-9282',
// useTime: '100ms'
// },
// {
// start_time: 1681990200,
// end_time: 1681993800,
// type: 'TOP 7',
// status: 'I',
// id: 'a90292870-9282',
// useTime: '100ms'
// },
// {
// start_time: 1681948800,
// end_time: 1681959600,
// type: 'TOP 8',
// status: 'J',
// id: 'a90292870-9282',
// useTime: '100ms'
// },
// {
// start_time: 1681945200,
// end_time: 1681956000,
// type: 'TOP 9',
// status: 'K',
// id: 'a90292870-9282',
// useTime: '100ms'
// }
];
const spec = {
type: 'rangeColumn',
direction: 'horizontal',
yField: 'type',
minField: 'start_time',
maxField: 'end_time',
seriesField: 'status',
dataZoom: [
{
orient: 'bottom',
height: 20,
start: 0,
end: 1,
filterMode: 'axis',
brushSelect: false,
startText: {
formatMethod: text => Math.floor(text)
},
endText: {
formatMethod: text => Math.floor(text)
}
}
],
axes: [
{ orient: 'left', type: 'band', bandPadding: 0.5, visible: true },
{
type: 'time',
orient: 'bottom',
min: 1681926000,
max: 1681963200 + 28800,
layers: [
{
tickStep: 28800,
timeFormat: '%Y%m%d %H:%M'
}
]
}
],
bar: {
style: {
fill: datum => {
const target = list.filter(item => item.status === datum.status);
return target[0].color;
}
}
},
barMinHeight: 10,
legends: {
visible: true,
data: items => {
return list.map(item => {
return {
id: item.status,
label: item.status,
shape: {
fill: item.color,
symbolType: 'rect'
}
};
});
},
item: {
label: {
formatMethod: text => {
const target = list.filter(item => item.status === text);
return target[0].label ?? text;
}
}
}
},
title: {
textStyle: {
character: [
{
text: 'Time-Consuming Distribution',
fontWeight: 400,
fill: '#222'
},
{
text: 'Show the SQL distribution of TOP 100',
fontWeight: 200,
fontSize: 10,
fill: '#555'
}
]
}
},
tooltip: {
visible: true,
dimension: {
visible: false
},
mark: {
title: {
key: 'Query ID',
value: datum => 'Query ID: ' + datum['id']
},
content: [
{
key: 'Time Consuming',
value: datum => datum['useTime']
},
{
key: 'start time',
value: datum => datum['start_time']
},
{
key: 'end time',
value: datum => datum['end_time']
}
]
}
},
data: [
{
id: 'data0',
values: data.reverse()
}
]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID, animation: false });
vchart.renderAsync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;Current Behavior
图例无法筛选
Expected Behavior
图例可正常筛选
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response