VChart
VChart copied to clipboard
[Feature] 希望支持一个轴功能。当轴对应的系列数据都被图例删选掉之后,轴可以隐藏。
What problem does this feature solve?
多个轴的场景,当某一个轴对应的数据已经被完全筛选掉之后,希望隐藏掉轴这个轴
const spec = {
type: 'common',
data: [
{
id: 'dau',
values: [
{ x: '05-01', type: '日均用户数', y: 5 },
{ x: '05-02', type: '日均用户数', y: 4 },
{ x: '05-03', type: '日均用户数', y: 7 },
{ x: '05-04', type: '日均用户数', y: 7 },
{ x: '05-05', type: '日均用户数', y: 9 },
{ x: '05-06', type: '日均用户数', y: 2 },
{ x: '05-07', type: '日均用户数', y: 13 },
]
},
{
id: 'total_message',
values: [
{ x: '05-01', type: '日均对话数量', y: 12 },
{ x: '05-02', type: '日均对话数量', y: 5 },
{ x: '05-03', type: '日均对话数量', y: 11 },
{ x: '05-04', type: '日均对话数量', y: 23 },
{ x: '05-05', type: '日均对话数量', y: 30 },
{ x: '05-06', type: '日均对话数量', y: 14 },
{ x: '05-07', type: '日均对话数量', y: 33 },
]
},
{
id: 'ratation',
values: [
{ x: '05-01', type: '平均7日留存', y: 0 },
{ x: '05-02', type: '平均7日留存', y: 0 },
{ x: '05-03', type: '平均7日留存', y: 0 },
{ x: '05-04', type: '平均7日留存', y: 0 },
{ x: '05-05', type: '平均7日留存', y: 0 },
{ x: '05-06', type: '平均7日留存', y: 0 },
{ x: '05-07', type: '平均7日留存', y: 0 },
]
},
{
id: 'round',
values: [
{ x: '05-01', type: '平均对话轮数', y: 1.8 },
{ x: '05-02', type: '平均对话轮数', y: 2.2 },
{ x: '05-03', type: '平均对话轮数', y: 3.5 },
{ x: '05-04', type: '平均对话轮数', y: 4.2 },
{ x: '05-05', type: '平均对话轮数', y: 3.2 },
{ x: '05-06', type: '平均对话轮数', y: 4.2 },
{ x: '05-07', type: '平均对话轮数', y: 2.3 },
]
},
{
id: 'star_rate',
values: [
{ x: '05-01', type: '点赞率', y: 0.99 },
{ x: '05-02', type: '点赞率', y: 0.7 },
{ x: '05-03', type: '点赞率', y: 0.9 },
{ x: '05-04', type: '点赞率', y: 0.9 },
{ x: '05-05', type: '点赞率', y: 0.99 },
{ x: '05-06', type: '点赞率', y: 0.92 },
{ x: '05-07', type: '点赞率', y: 0.99 },
]
},
{
id: 'round_time',
values: [
{ x: '05-01', type: '对话持续时间', y: 34012 },
{ x: '05-02', type: '对话持续时间', y: 35012 },
{ x: '05-03', type: '对话持续时间', y: 38012 },
{ x: '05-04', type: '对话持续时间', y: 32012 },
{ x: '05-05', type: '对话持续时间', y: 44012 },
{ x: '05-06', type: '对话持续时间', y: 24012 },
{ x: '05-07', type: '对话持续时间', y: 34012 },
]
},
],
series: [
{
type: 'line',
id: 'dau',
dataId: 'dau',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#4D53E8'
}
},
line: {
style: {
stroke: '#4D53E8'
}
}
},
{
type: 'line',
id: 'total_message',
dataId: 'total_message',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#2C90FF'
}
},
line: {
style: {
stroke: '#2C90FF'
}
}
},
{
type: 'line',
id: 'round',
dataId: 'round',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#C2DFFF'
}
},
line: {
style: {
stroke: '#C2DFFF'
}
}
},
{
type: 'line',
id: 'ratation',
dataId: 'ratation',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#A4EE00'
}
},
line: {
style: {
stroke: '#A4EE00'
}
}
},
{
type: 'line',
id: 'star_rate',
dataId: 'star_rate',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#32A247'
}
},
line: {
style: {
stroke: '#32A247'
}
}
},
{
type: 'line',
id: 'round_time',
dataId: 'round_time',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#FF9600',
fillOpacity: 0.5
}
},
line: {
style: {
stroke: '#FF9600',
strokeOpacity: 0.5
}
}
},
],
axes: [
{
orient: 'left',
seriesId: ['dau','total_message','round'],
label: {
style: {
fill: '#1B59F8',
opacity: 0.45
}
}
},
{
orient: 'right',
seriesId: ['round_time'],
grid: { visible: false },
label: {
formatMethod: (text)=>{
return text+'ms'
},
style: {
fill: '#FF9600',
fillOpacity: 0.5
}
},
padding: {
left: 16
},
domainLine: {
visible: true,
style: {
stroke: '#FF9600',
strokeOpacity: 0.5
}
},
tick: {
visible: true,
style: {
stroke: '#FF9600',
strokeOpacity: 0.5
}
}
},
{
orient: 'right',
seriesId: ['star_rate','ratation'],
grid: { visible: false },
label: {
formatMethod: (text)=>{
return text * 100 + '%'
},
style: {
fill: '#85C600',
fillOpacity: 0.5
}
},
domainLine: {
visible: true,
style: {
stroke: '#85C600',
strokeOpacity: 0.5
}
},
},
{
orient: 'bottom',
label: { visible: true },
type: 'band'
}
],
legends: {
visible: true,
orient: 'bottom'
}
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
What does the proposed API look like?
unkonw