[Bug] When chart's size is very small will cause chart crash #355
Description
Version
latest
Link to Minimal Reproduction
none
Steps to Reproduce
{
height: 36,
width: 36,
valueField: 'value',
type: 'pie',
outerRadius: 0.5,
title: { text: '饼图' },
categoryField: 'type',
label: { visible: true, position: 'outside', rotate: true },
data: {
values: [
{ value: '46.60', type: 'oxygen' },
{ value: '27.72', type: 'silicon' },
{ value: '8.13', type: 'aluminum' },
{ value: '5', type: 'iron' },
{ value: '3.63', type: 'calcium' },
{ value: '2.59', type: 'potassium' },
{ value: '3.5', type: 'others' }
]
},
centerOffset: 2,
theme: {
background: '#fff',
padding: 12,
fontFamily:
'PingFang SC,Microsoft Yahei,system-ui,-apple-system,segoe ui,Roboto,Helvetica,Arial,sans-serif, apple color emoji,segoe ui emoji,segoe ui symbol',
colorScheme: {
default: {
palette: {
labelFontColor: '#333333',
titleFontColor: '#333333',
axisGridColor: '#d0d3d6',
axisDomainColor: '#1f2329'
},
dataScheme: [
{
maxDomainLength: 15,
scheme: [
'#4e83fd',
'#50cefb',
'#935af6',
'#fad355',
'#f76964',
'#ffa53d',
'#82a7fc',
'#7edafb',
'#ad82f7',
'#f7dc82',
'#f98e8b',
'#ffba6b',
'#3370ff',
'#14c0ff',
'#7f3bf5',
'#ffc60a',
'#f54a45',
'#ff8800',
'#bacefd',
'#b1e8fc',
'#cdb2fa',
'#f8e6ab',
'#fbbfbc',
'#fed4a4',
'#245bdb',
'#049fd7',
'#6425d0',
'#dc9b04',
'#d83931',
'#de7802'
]
}
]
}
},
component: {
title: {
textStyle: { fontColor: '#333', fontSize: 14, fontWeight: 'bold' },
subtextStyle: { fontColor: '#6F6F6F', fontSize: 12, fontWeight: 'normal' }
},
axis: {
domainLine: { visible: true, style: { lineWidth: 1, stroke: '#1f2329', strokeOpacity: 1 } },
grid: { visible: true, style: { lineWidth: 1, stroke: '#d0d3d6', strokeOpacity: 1, lineDash: [0, 0] } },
tick: { visible: false, tickSize: 4, style: { lineWidth: 1, stroke: '#d0d3d6', strokeOpacity: 1 } },
label: {
visible: true,
space: 4,
style: { fontSize: 12, fill: '#646a73', fontWeight: 'normal', fillOpacity: 1 }
},
title: { space: 8, style: { fontSize: 12, fill: '#333333', fontWeight: 'normal', fillOpacity: 1 } }
},
axisX: {},
axisY: { domainLine: { visible: false }, tick: { visible: false, tickSize: 0 } },
discreteLegend: {
maxLengthOnLeftRight: 214,
padding: { left: 12, right: 12, top: 16, bottom: 12 },
orient: 'bottom',
maxRow: 2,
item: {
visible: true,
spaceCol: 8,
spaceRow: 8,
padding: { left: 4, right: 22, top: 4, bottom: 4 },
background: {
visible: true,
state: {
selected: { fill: '#fff', fillOpacity: 0 },
unSelected: { fill: '#fff', fillOpacity: 0 },
selectedHover: { fill: '#141414', fillOpacity: 0.08 },
unSelectedHover: { fill: '#141414', fillOpacity: 0.08 }
}
},
label: {
style: {
fontSize: 12,
fontWeight: 'normal',
fontStyle: 'normal',
fill: 'rgba(46, 47, 50, 0.8)',
maxLineWidth: 400
},
state: {
selected: { fillOpacity: 1 },
unSelected: { fillOpacity: 0.9 },
selectedHover: { fillOpacity: 0.7, fill: '#1f2329' },
unSelectedHover: { fillOpacity: 0.65 }
}
},
shape: { space: 4, style: { symbolType: 'square', size: 12 } }
},
title: { style: { fontSize: 12, fontWeight: 'normal', fill: 'rgba(46, 47, 50, 1)' } },
autoPage: false,
pager: { textStyle: { fill: '#000', fontSize: 12, lineHeight: 14 }, padding: 8 }
},
colorLegend: {
horizontal: {
padding: { left: 0, right: 24, top: 18, bottom: 18 },
title: {
visible: false,
padding: 0,
textStyle: { fontSize: 12, fontWeight: 'normal', fontColor: 'rgba(46, 47, 50, 1)' },
space: 12
},
handlerText: { style: { fontSize: 12 } },
rail: { width: 200, height: 8, style: { fill: 'rgba(0,0,0,0.04)' } }
},
vertical: {
padding: { left: 0, right: 24, top: 18, bottom: 18 },
title: {
visible: false,
padding: 0,
textStyle: { fontSize: 12, fontWeight: 'normal', fontColor: 'rgba(46, 47, 50, 1)' },
space: 12
},
handlerText: { style: { fontSize: 12 } },
rail: { width: 200, height: 8, style: { fill: 'rgba(0,0,0,0.04)' } }
}
},
sizeLegend: {
horizontal: {
rail: { width: 200, height: 12, style: { fill: 'rgba(0,0,0,0.04)' } },
padding: { left: 0, right: 24, top: 18, bottom: 18 },
title: {
visible: false,
padding: 0,
textStyle: { fontSize: 12, fontWeight: 'normal', fontColor: 'rgba(46, 47, 50, 1)' },
space: 12
},
handler: { visible: true },
startText: { style: { fontSize: 12 } },
endText: { style: { fontSize: 12 } },
handlerText: { style: { fontSize: 12 } }
},
vertical: {
rail: { width: 12, height: 200, style: { fill: 'rgba(0,0,0,0.04)' } },
padding: { left: 0, right: 24, top: 18, bottom: 18 },
title: {
visible: false,
padding: 0,
textStyle: { fontSize: 12, fontWeight: 'normal', fontColor: 'rgba(46, 47, 50, 1)' },
space: 12
},
handler: { visible: true },
startText: { style: { fontSize: 12 } },
endText: { style: { fontSize: 12 } },
handlerText: { style: { fontSize: 12 } }
}
},
tooltip: {
panel: {
padding: { top: 10, left: 10, right: 10, bottom: 10 },
backgroundColor: 'rgba(47, 59, 82, 0.9)',
border: { color: '#ffffff', width: 0, radius: 3 },
shadow: { x: 0, y: 4, blur: 12, spread: 0, color: 'rgba(0, 0, 0, 0.2)' }
},
spaceRow: 6,
maxWidth: 400,
titleLabel: { fontSize: 14, fontColor: '#fff', lineHeight: 18, textAlign: 'left' },
offset: { x: 10, y: 10 },
shape: { size: 7 },
keyLabel: { fontSize: 12, fontColor: '#fff', lineHeight: 18, textAlign: 'left' },
valueLabel: { fontSize: 12, fontColor: '#fff', lineHeight: 18, textAlign: 'left' }
},
dataZoom: {
showDetail: 'auto',
middleHandler: {
visible: false,
background: { size: 5, style: { stroke: '#D1D5DA', cornerRadius: 2 } },
icon: {
style: {
size: 8,
fill: 'white',
stroke: '#D1D5DA',
symbolType:
'M 0.3 -0.5 C 0.41 -0.5 0.5 -0.41 0.5 -0.3 C 0.5 -0.3 0.5 0.3 0.5 0.3 C 0.5 0.41 0.41 0.5 0.3 0.5 C 0.3 0.5 -0.3 0.5 -0.3 0.5 C -0.41 0.5 -0.5 0.41 -0.5 0.3 C -0.5 0.3 -0.5 -0.3 -0.5 -0.3 C -0.5 -0.41 -0.41 -0.5 -0.3 -0.5 C -0.3 -0.5 0.3 -0.5 0.3 -0.5 Z',
lineWidth: 0.5
}
}
},
background: { size: 28, style: { fill: '#e6e8eb', lineWidth: 0 } },
startHandler: { style: { stroke: '#7F899B' } },
endHandler: { style: { stroke: '#7F899B' } },
startText: { padding: 8, style: { fontSize: 10, fill: '#6F6F6F' } },
endText: { padding: 8, style: { fontSize: 10, fill: '#6F6F6F' } },
selectedBackground: { style: { fill: '#D8E4F7' } },
dragMask: { style: { fill: '#D9E5F8', stroke: '#AEB8C6', lineWidth: 1 } },
backgroundChart: {
area: { style: { lineWidth: 1, fill: '#b2b8c3' } },
line: { style: { stroke: '#b2b8c3', lineWidth: 1 } }
},
selectedBackgroundChart: {
area: { style: { lineWidth: 1, fill: '#e0e7f6' } },
line: { style: { stroke: '#e0e7f6', lineWidth: 1 } }
}
},
crosshair: {
xField: {
visible: false,
line: { type: 'rect', visible: true, style: { fill: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } },
label: {
visible: true,
style: { fill: '#fff', fontSize: 14 },
labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } }
}
},
yField: {
visible: false,
line: { type: 'line', visible: true, style: { stroke: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } },
label: {
visible: true,
style: { fill: '#fff', fontSize: 14 },
labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } }
}
},
categoryField: {
visible: false,
line: { type: 'line', visible: true, style: { stroke: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } },
label: {
visible: true,
style: { fill: '#fff', fontSize: 14 },
labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } }
}
},
valueField: {
visible: false,
line: { type: 'line', visible: true, style: { stroke: 'rgba(47, 59, 82, 0.9)', opacity: 0.2 } },
label: {
visible: true,
style: { fill: '#fff', fontSize: 14 },
labelBackground: { style: { fill: 'rgba(47, 59, 82, 0.9)', cornerRadius: 4 } }
}
}
},
markLine: {
line: { style: { lineDash: [3, 3], stroke: 'rgba(46, 47, 50, 0.6)', lineWidth: 1 } },
startSymbol: {
visible: false,
symbolType: 'triangle',
style: { stroke: null, lineWidth: 0, fill: 'rgba(46, 47, 50, 0.8)', size: 80 }
},
endSymbol: {
visible: true,
symbolType: 'M0 0l-2 1 0.7289-1-0.7289-1z',
style: { stroke: null, lineWidth: 0, fill: 'rgba(46, 47, 50, 0.8)', size: 20 }
},
label: {
position: 'end',
refY: 5,
style: {
fontSize: 12,
fontWeight: 'normal',
fontStyle: 'normal',
fill: 'rgba(46, 47, 50, 1)',
stroke: '#fff',
lineWidth: 0,
maxLineWidth: 150
},
labelBackground: {
visible: false,
padding: { left: 1, right: 1, top: 1, bottom: 1 },
style: {
fill: 'rgba(46, 47, 50, 0.8)',
fillOpacity: 1,
strokeOpacity: 0.9,
lineWidth: 1,
cornerRadius: 0
}
}
}
}
},
series: {
line: {
point: {
state: {
hover: { scaleX: 1.5, scaleY: 1.5, lineWidth: 1, stroke: '#000' },
dimension_hover: { scaleX: 1.5, scaleY: 1.5, lineWidth: 1, stroke: '#000' }
}
}
},
area: {
point: {
state: {
hover: { scaleX: 1.5, scaleY: 1.5, lineWidth: 1, stroke: '#000' },
dimension_hover: { scaleX: 1.5, scaleY: 1.5, lineWidth: 1, stroke: '#000' }
}
}
},
pie: {
pie: { state: { hover: { lineWidth: 1, stroke: '#000', radiusOffset: 20 } } },
label: { interactive: false }
},
bar: { bar: { state: { hover: { lineWidth: 1, stroke: '#000' } } } }
}
}
}Current Behavior
page crash
Expected Behavior
render correctly
Environment
- OS:
- Browser:
- Framework:Any additional comments?
No response