|
|
@@ -458,6 +458,14 @@ const generatePieChart = (baseOption) => {
|
|
|
|
|
|
return {
|
|
|
...baseOption,
|
|
|
+ // 调整grid以给标签留出更多空间
|
|
|
+ grid: {
|
|
|
+ left: '15%',
|
|
|
+ right: '15%',
|
|
|
+ bottom: '15%',
|
|
|
+ top: '15%',
|
|
|
+ containLabel: true
|
|
|
+ },
|
|
|
tooltip: {
|
|
|
trigger: 'item',
|
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)',
|
|
|
@@ -468,17 +476,13 @@ const generatePieChart = (baseOption) => {
|
|
|
}
|
|
|
},
|
|
|
legend: {
|
|
|
- orient: 'vertical',
|
|
|
- left: 'left',
|
|
|
- textStyle: {
|
|
|
- color: 'var(--sa-subtitle)'
|
|
|
- }
|
|
|
+ show: false // 隐藏图例
|
|
|
},
|
|
|
series: [{
|
|
|
name: props.title,
|
|
|
type: 'pie',
|
|
|
- radius: ['40%', '70%'],
|
|
|
- center: ['60%', '50%'],
|
|
|
+ radius: ['25%', '50%'], // 进一步缩小饼图半径，为标签留出更多空间
|
|
|
+ center: ['50%', '50%'], // 居中显示
|
|
|
data: pieData,
|
|
|
emphasis: {
|
|
|
itemStyle: {
|
|
|
@@ -489,11 +493,54 @@ const generatePieChart = (baseOption) => {
|
|
|
},
|
|
|
label: {
|
|
|
show: true,
|
|
|
- formatter: '{b}: {d}%'
|
|
|
+ formatter: function (params) {
|
|
|
+ // 格式化日期显示，如果日期太长则截断
|
|
|
+ let name = params.name;
|
|
|
+ if (name.length > 10) {
|
|
|
+ // 如果是日期格式，尝试简化显示
|
|
|
+ if (name.includes('-')) {
|
|
|
+ const parts = name.split('-');
|
|
|
+ if (parts.length >= 2) {
|
|
|
+ name = parts[1] + '-' + parts[2]; // 显示月-日
|
|
|
+ }
|
|
|
+ } else if (name.length > 8) {
|
|
|
+ name = name.substring(0, 8) + '...'; // 截断长文本
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return name + ': ' + params.percent + '%';
|
|
|
+ },
|
|
|
+ fontSize: 11,
|
|
|
+ color: 'var(--sa-subfont)',
|
|
|
+ // 标签位置优化
|
|
|
+ position: 'outside',
|
|
|
+ distanceToLabelLine: 8,
|
|
|
+ // 文字换行
|
|
|
+ rich: {
|
|
|
+ name: {
|
|
|
+ fontSize: 11,
|
|
|
+ color: 'var(--sa-subfont)'
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
labelLine: {
|
|
|
- show: true
|
|
|
- }
|
|
|
+ show: true,
|
|
|
+ length: 20, // 增加第一段线长度
|
|
|
+ length2: 15, // 增加第二段线长度
|
|
|
+ smooth: 0.2, // 线条平滑度
|
|
|
+ lineStyle: {
|
|
|
+ color: 'var(--sa-space)',
|
|
|
+ width: 1
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 避免标签重叠
|
|
|
+ avoidLabelOverlap: true,
|
|
|
+ // 标签布局优化
|
|
|
+ labelLayout: {
|
|
|
+ hideOverlap: true,
|
|
|
+ moveOverlap: 'shiftY' // 当标签重叠时，垂直移动标签
|
|
|
+ },
|
|
|
+ // 确保标签在容器内
|
|
|
+ silent: false
|
|
|
}]
|
|
|
}
|
|
|
}
|
