优化图表大小及描述

This commit is contained in:
2026-04-07 11:30:24 +08:00
parent 743937a176
commit 5c67241751
2 changed files with 45 additions and 14 deletions

View File

@@ -39,7 +39,7 @@
const statusDict = ref<DictData[]>([]);
const STATUS_COLORS = ['#3B82F6', '#10B981', '#F97316', '#EC4899', '#8B5CF6', '#06B6D4'];
const AMOUNT_LINE_COLOR = '#F59E0B';
const AMOUNT_LINE_COLOR = '#FBBF24';
let pieChartInstance: echarts.ECharts | null = null;
let barChartInstance: echarts.ECharts | null = null;
let resizeObserver: ResizeObserver | null = null;
@@ -208,7 +208,7 @@
series.push({
name: '空态环',
type: 'pie',
radius: ['46%', '72%'],
radius: ['40%', '64%'],
center: ['50%', '44%'],
silent: true,
legendHoverLink: false,
@@ -234,7 +234,7 @@
series.push({
name: '合同状态',
type: 'pie',
radius: total ? ['46%', '72%'] : [0, 0],
radius: total ? ['40%', '64%'] : [0, 0],
center: ['50%', '44%'],
avoidLabelOverlap: true,
minAngle: total ? 4 : 0,
@@ -245,9 +245,9 @@
},
label: {
show: total,
formatter: ({ name, value, percent }) => (total ? `${name}\n${value}项 / ${percent}%` : ''),
formatter: ({ name, percent }) => (total && Number(percent) >= 8 ? `${name}\n${percent}%` : ''),
color: isDark ? '#e2e8f0' : '#334155',
fontSize: 12,
fontSize: 11,
},
emphasis: {
scale: true,
@@ -257,6 +257,9 @@
silent: !total,
labelLine: {
show: total,
length: 4,
length2: 3,
maxSurfaceAngle: 80,
},
});
@@ -316,7 +319,7 @@
left: 'center',
top: '51%',
style: {
text: `金额 ${formatAmountWan(totalContractAmount.value, 2)}万元`,
text: ` ${formatAmountWan(totalContractAmount.value, 2)}万元`,
fill: isDark ? '#94a3b8' : '#64748b',
fontSize: 12,
fontWeight: 500,
@@ -401,7 +404,7 @@
yAxisIndex: 1,
smooth: true,
symbol: 'circle',
symbolSize: 6,
symbolSize: 4,
itemStyle: {
color: AMOUNT_LINE_COLOR,
},
@@ -409,6 +412,19 @@
color: AMOUNT_LINE_COLOR,
width: 2,
},
areaStyle: {
color: {
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [
{ offset: 0, color: 'rgba(251, 191, 36, 0.28)' },
{ offset: 1, color: 'rgba(251, 191, 36, 0.04)' },
],
},
},
emphasis: {
focus: 'series',
},
@@ -460,8 +476,16 @@
left: 'center',
itemGap: 16,
data: [...statusItems.map((item) => item.label), ...(hasData ? ['合同金额'] : [])],
formatter: (name) => (name === '合同金额' ? `{amount|${name}}` : name),
textStyle: {
color: isDark ? '#e2e8f0' : '#475569',
rich: {
amount: {
color: isDark ? '#94a3b8' : '#64748b',
fontSize: 12,
fontWeight: 400,
},
},
},
},
xAxis: {
@@ -509,12 +533,16 @@
splitLine: {
show: false,
},
nameGap: 8,
nameTextStyle: {
color: isDark ? '#94a3b8' : '#64748b',
padding: [0, 0, 2, 0],
color: isDark ? 'rgba(148, 163, 184, 0.72)' : 'rgba(100, 116, 139, 0.88)',
padding: [0, 0, 0, 0],
align: 'right',
fontSize: 11,
fontWeight: 400,
},
axisLabel: {
color: isDark ? '#94a3b8' : '#64748b',
color: isDark ? 'rgba(148, 163, 184, 0.78)' : 'rgba(100, 116, 139, 0.92)',
formatter: (value) => `${value}`,
},
},

View File

@@ -179,7 +179,7 @@
series.push({
name: '空态环',
type: 'pie',
radius: ['46%', '72%'],
radius: ['40%', '64%'],
center: ['50%', '44%'],
silent: true,
legendHoverLink: false,
@@ -205,7 +205,7 @@
series.push({
name: '任务状态',
type: 'pie',
radius: total ? ['46%', '72%'] : [0, 0],
radius: total ? ['40%', '64%'] : [0, 0],
center: ['50%', '44%'],
avoidLabelOverlap: true,
minAngle: total ? 4 : 0,
@@ -216,9 +216,9 @@
},
label: {
show: total,
formatter: ({ name, value, percent }) => (total ? `${name}\n${value}项 / ${percent}%` : ''),
formatter: ({ name, percent }) => (total && Number(percent) >= 8 ? `${name}\n${percent}%` : ''),
color: isDark ? '#e2e8f0' : '#334155',
fontSize: 12,
fontSize: 11,
},
emphasis: {
scale: true,
@@ -228,6 +228,9 @@
silent: !total,
labelLine: {
show: total,
length: 4,
length2: 3,
maxSurfaceAngle: 80,
},
});