VChart
VChart copied to clipboard
VisActor
[Bug] 主题的padding覆盖了spec中的padding，导致spec中的配置无效
Version
1.11.5
Link to Minimal Reproduction
null
Steps to Reproduce
const spec = {
type: 'common',
data: [
{
id: 'dau',
values: [
{ x: '05-01', type: '日均用户数', y: 5 },
{ x: '05-02', type: '日均用户数1', y: 4 },
{ x: '05-03', type: '日均用户数2', y: 7 },
{ x: '05-04', type: '日均用户数3', y: 7 },
{ x: '05-05', type: '日均用户数4', y: 9 },
{ x: '05-06', type: '日均用户数5', 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: '对话持续时间1', y: 34012 },
{ x: '05-02', type: '对话持续时间', y: 35012 },
{ x: '05-03', type: '对话持续时间2', y: 38012 },
{ x: '05-04', type: '对话持续时间3', y: 32012 },
{ x: '05-05', type: '对话持续时间4', y: 50000 },
{ x: '05-06', type: '对话持续时间5', y: 24012 },
{ x: '05-07', type: '对话持续时间6', y: 34012 },
]
},
],
series: [
{
type: 'line',
id: 'dau-line',
regionId: 'count',
dataId: 'dau',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#4D53E8'
}
},
line: {
style: {
stroke: '#4D53E8'
}
}
},
{
type: 'line',
id: 'total_message-line',
dataId: 'total_message',
regionId: 'count',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#2C90FF'
}
},
line: {
style: {
stroke: '#2C90FF'
}
}
},
{
type: 'line',
id: 'round-line',
dataId: 'round',
regionId: 'count',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#C2DFFF'
}
},
line: {
style: {
stroke: '#C2DFFF'
}
}
},
{
type: 'line',
id: 'ratation-line',
dataId: 'ratation',
regionId: 'percentage',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#A4EE00'
}
},
line: {
style: {
stroke: '#A4EE00'
}
}
},
{
type: 'line',
id: 'star_rate-line',
dataId: 'star_rate',
regionId: 'percentage',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#32A247'
}
},
line: {
style: {
stroke: '#32A247'
}
}
},
{
type: 'line',
id: 'round_time-line',
dataId: 'round_time',
regionId: 'time',
seriesField: 'type',
xField: 'x',
yField: 'y',
point: {
style: {
fill: '#FF9600',
fillOpacity: 0.5
}
},
line: {
style: {
stroke: '#FF9600',
strokeOpacity: 0.5
}
}
},
],
axes: [
{
id: 'axes-count',
orient: 'left',
seriesId: ['dau-line', 'total_message-line', 'round-line'],
regionId: 'count',
label: {
flush: true,
style: {
fill: '#1B59F8',
opacity: 0.45
}
},
domainLine: {
visible: true,
style: {
stroke: '#85C600',
strokeOpacity: 0.5
}
},
},
{
id: 'axes-time',
orient: 'left',
seriesId: ['round_time-line'],
regionId: 'time',
label: {
flush: true,
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
// }
// }
},
{
id: 'axes-percentage',
orient: 'left',
seriesId: ['star_rate-line', 'ratation-line'],
regionId: 'percentage',
label: {
flush: true,
formatMethod: (text) => {
return text * 100 + '%'
},
style: {
fill: '#85C600',
fillOpacity: 0.5
}
},
domainLine: {
visible: true,
style: {
stroke: '#85C600',
strokeOpacity: 0.5
}
},
},
{
id: 'axes-bottom-1',
orient: 'bottom',
regionIndex: [0],
label: { visible: true },
type: 'band',
},
{
id: 'axes-bottom-2',
orient: 'bottom',
regionIndex: [1],
label: { visible: true },
type: 'band',
},
{
id: 'axes-bottom-3',
orient: 'bottom',
regionIndex: [2],
label: { visible: true },
type: 'band',
}
],
layout: {
type: 'grid',
col: 2,
row: 9,
elements: [
{
modelId: 'axes-percentage',
col: 0,
row: 0
},
{
modelId: 'axes-count',
col: 0,
row: 3
},
{
modelId: 'axes-time',
col: 0,
row: 6
},
{
modelId: 'axes-bottom-1',
col: 1,
row: 1
},
{
modelId: 'axes-bottom-2',
col: 1,
row: 4
},
{
modelId: 'axes-bottom-3',
col: 1,
row: 7
},
{
modelId: 'percentage',
col: 1,
row: 0
},
{
modelId: 'count',
col: 1,
row: 3
},
{
modelId: 'time',
col: 1,
row: 6
},
{
modelId: 'legend1',
col: 1,
row: 2
},
{
modelId: 'legend2',
col: 1,
row: 5
},
{
modelId: 'legend3',
col: 1,
row: 8
},
]
},
region: [
{
id: 'percentage'
},
{
id: 'count',
},
{
id: 'time'
}
],
legends: [
{
id: 'legend1',
visible: true,
orient: 'bottom',
regionId: ['percentage']
},
{
id: 'legend2',
visible: true,
orient: 'bottom',
regionId: ['count'],
padding: {
top: 8,
bottom: 20
},
},
{
id: 'legend3',
visible: true,
orient: 'bottom',
regionId: ['time'],
padding: {
top: 8,
bottom: 20
},
},
],
crosshair: [{
xField: {
visible: true,
bindingAxesIndex: [3],
}
},
{
xField: {
visible: true,
bindingAxesIndex: [4],
}
},
{
xField: {
visible: true,
bindingAxesIndex: [5],
}
}]
};
const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();
// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;
Current Behavior
padding不会跟着spec配置变化
Expected Behavior
padding优先使用spec配置
Environment
- OS:
- Browser:
- Framework:
Any additional comments?
No response
