[Bug] legend's width not increase when increase the width of chart #4240
Description
Version
2.0.x
Link to Minimal Reproduction
no
Steps to Reproduce
const spec = {
type: 'pie',
outerRadius: 0.8,
innerRadius: 0,
valueField: '__MeaValue__',
categoryField: '__Dim_ColorId__',
padding: 0,
region: [
{
clip: true
}
],
animation: false,
color: {
type: 'ordinal',
domain: [
'2019-profit-profit',
'2019-sales-sales',
'2020-profit-profit',
'2020-sales-sales',
'2021-profit-profit',
'2021-sales-sales',
'2022-profit-profit',
'2022-sales-sales',
'2023-profit-profit',
'2023-sales-sales'
],
range: [
'#8D72F6',
'#5766EC',
'#66A3FE',
'#51D5E6',
'#4EC0B3',
'#F9DF90',
'#F9AD71',
'#ED8888',
'#E9A0C3',
'#D77DD3'
]
},
background: 'transparent',
data: {
id: 'pie',
values: [
{
date: '2019',
__OriginalData__: {
date: '2019',
profit: 10,
sales: 20
},
profit: 10,
__MeaId__: 'profit',
__MeaName__: 'profit',
__MeaValue__: 10,
__Dim_Color__: '2019-profit',
__Dim_Detail__: '2019-profit',
__Dim_ColorId__: '2019-profit-profit'
},
{
date: '2019',
__OriginalData__: {
date: '2019',
profit: 10,
sales: 20
},
sales: 20,
__MeaId__: 'sales',
__MeaName__: 'sales',
__MeaValue__: 20,
__Dim_Color__: '2019-sales',
__Dim_Detail__: '2019-sales',
__Dim_ColorId__: '2019-sales-sales'
},
{
date: '2020',
__OriginalData__: {
date: '2020',
profit: 30,
sales: 60
},
profit: 30,
__MeaId__: 'profit',
__MeaName__: 'profit',
__MeaValue__: 30,
__Dim_Color__: '2020-profit',
__Dim_Detail__: '2020-profit',
__Dim_ColorId__: '2020-profit-profit'
},
{
date: '2020',
__OriginalData__: {
date: '2020',
profit: 30,
sales: 60
},
sales: 60,
__MeaId__: 'sales',
__MeaName__: 'sales',
__MeaValue__: 60,
__Dim_Color__: '2020-sales',
__Dim_Detail__: '2020-sales',
__Dim_ColorId__: '2020-sales-sales'
},
{
date: '2021',
__OriginalData__: {
date: '2021',
profit: 30,
sales: 60
},
profit: 30,
__MeaId__: 'profit',
__MeaName__: 'profit',
__MeaValue__: 30,
__Dim_Color__: '2021-profit',
__Dim_Detail__: '2021-profit',
__Dim_ColorId__: '2021-profit-profit'
},
{
date: '2021',
__OriginalData__: {
date: '2021',
profit: 30,
sales: 60
},
sales: 60,
__MeaId__: 'sales',
__MeaName__: 'sales',
__MeaValue__: 60,
__Dim_Color__: '2021-sales',
__Dim_Detail__: '2021-sales',
__Dim_ColorId__: '2021-sales-sales'
},
{
date: '2022',
__OriginalData__: {
date: '2022',
profit: 50,
sales: 100
},
profit: 50,
__MeaId__: 'profit',
__MeaName__: 'profit',
__MeaValue__: 50,
__Dim_Color__: '2022-profit',
__Dim_Detail__: '2022-profit',
__Dim_ColorId__: '2022-profit-profit'
},
{
date: '2022',
__OriginalData__: {
date: '2022',
profit: 50,
sales: 100
},
sales: 100,
__MeaId__: 'sales',
__MeaName__: 'sales',
__MeaValue__: 100,
__Dim_Color__: '2022-sales',
__Dim_Detail__: '2022-sales',
__Dim_ColorId__: '2022-sales-sales'
},
{
date: '2023',
__OriginalData__: {
date: '2023',
profit: 40,
sales: 80
},
profit: 40,
__MeaId__: 'profit',
__MeaName__: 'profit',
__MeaValue__: 40,
__Dim_Color__: '2023-profit',
__Dim_Detail__: '2023-profit',
__Dim_ColorId__: '2023-profit-profit'
},
{
date: '2023',
__OriginalData__: {
date: '2023',
profit: 40,
sales: 80
},
sales: 80,
__MeaId__: 'sales',
__MeaName__: 'sales',
__MeaValue__: 80,
__Dim_Color__: '2023-sales',
__Dim_Detail__: '2023-sales',
__Dim_ColorId__: '2023-sales-sales'
}
],
fields: {
__Dim_Angle__: {
sortIndex: 0
},
__Dim_X__: {
sortIndex: 0
},
__Dim_ColorId__: {
sortIndex: 0
}
}
},
pie: {
style: {
stroke: 'transparent',
lineWidth: 1
},
state: {
hover: {
outerRadius: 0.8800000000000001
}
}
},
legends: {
type: 'discrete',
visible: true,
maxCol: 1,
maxRow: 1,
autoPage: true,
orient: 'right',
position: 'start',
item: {
focus: true,
maxWidth: '30%',
focusIconStyle: {
size: 14,
fill: '#646A73',
fontWeight: 400
},
shape: {
space: 6,
style: {
symbolType: 'rectRound',
size: 8
}
},
label: {
style: {
fontSize: 12,
fill: '#646A73',
fontWeight: 400
}
},
background: {
state: {
selectedHover: {
fill: '#646A73',
fillOpacity: 0.05
}
}
}
},
padding: 0
},
label: {
visible: true,
style: {},
smartInvert: false,
overlap: {
hideOnHit: true,
clampForce: true
},
layout: {
align: 'labelLine'
}
},
tooltip: {
visible: true,
mark: {
title: {
visible: false
},
content: [
{
visible: true,
hasShape: true,
shapeType: 'rectRound'
},
{
visible: true,
hasShape: true,
shapeType: 'rectRound'
}
]
},
dimension: {
title: {
visible: true
},
content: [
{
visible: true,
shapeType: 'rectRound',
hasShape: true
}
]
}
}
};
const vchart = new VChart(spec, {
dom: document.getElementById('chart') as HTMLElement,
mode: isMobile ? 'mobile-browser' : 'desktop-browser'
});
vchart.renderSync();
Current Behavior
- 初始化宽度比较小，图例发生了省略
- 调大图表的宽度，图例的宽度没有任何变化
Expected Behavior
图例宽度能够适应图表宽度变化
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response