style(MainBusinessAnalysis): 优化主营业务饼图布局避免遮挡
- 简化标题为"主营业务构成(报告期)",移除冗余副标题 - 图例从左侧垂直改为底部水平排列,避免与饼图重叠 - 饼图居中显示(center: 50%, 48%) - 饼图标签简化为仅显示百分比 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -248,8 +248,8 @@ export const MainBusinessAnalysis: React.FC<MainBusinessAnalysisProps> = ({
|
|||||||
}));
|
}));
|
||||||
|
|
||||||
const pieOption = getMainBusinessPieOption(
|
const pieOption = getMainBusinessPieOption(
|
||||||
`主营业务构成 - ${latestPeriod.report_type}`,
|
`主营业务构成(${latestPeriod.report_type})`,
|
||||||
dataSource === 'industry' ? '按行业分类' : '按产品分类',
|
'',
|
||||||
pieData
|
pieData
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -238,22 +238,18 @@ const BLACK_GOLD_PIE_COLORS = chartTheme.goldSeries;
|
|||||||
*/
|
*/
|
||||||
export const getMainBusinessPieOption = (
|
export const getMainBusinessPieOption = (
|
||||||
title: string,
|
title: string,
|
||||||
subtitle: string,
|
_subtitle: string,
|
||||||
data: { name: string; value: number }[]
|
data: { name: string; value: number }[]
|
||||||
) => {
|
) => {
|
||||||
return {
|
return {
|
||||||
title: {
|
title: {
|
||||||
text: title,
|
text: title,
|
||||||
subtext: subtitle,
|
|
||||||
left: 'center',
|
left: 'center',
|
||||||
|
top: 0,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: fui.gold,
|
color: fui.gold,
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
},
|
},
|
||||||
subtextStyle: {
|
|
||||||
color: '#A0AEC0',
|
|
||||||
fontSize: 12,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'item',
|
trigger: 'item',
|
||||||
@@ -269,26 +265,29 @@ export const getMainBusinessPieOption = (
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
orient: 'vertical',
|
orient: 'horizontal',
|
||||||
left: 'left',
|
bottom: 0,
|
||||||
top: 'center',
|
left: 'center',
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#E2E8F0',
|
color: '#E2E8F0',
|
||||||
fontSize: 12,
|
fontSize: 11,
|
||||||
},
|
},
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
itemGap: 8,
|
||||||
},
|
},
|
||||||
color: BLACK_GOLD_PIE_COLORS,
|
color: BLACK_GOLD_PIE_COLORS,
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
radius: '55%',
|
radius: '50%',
|
||||||
center: ['55%', '50%'],
|
center: ['50%', '48%'],
|
||||||
data: data,
|
data: data,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
color: '#E2E8F0',
|
color: '#E2E8F0',
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
formatter: '{b}: {d}%',
|
formatter: '{d}%',
|
||||||
},
|
},
|
||||||
labelLine: {
|
labelLine: {
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
|
|||||||
Reference in New Issue
Block a user