style(ops): 饼图去掉图例仅保留悬浮卡片,柱状图紫色改为蓝色

- 状态分布饼图:移除右侧 legend 图例,饼图居中显示,仅通过 hover tooltip 查看详情
- 工牌队列柱状图:紫色系(#722ed1)改为蓝色系(#1677ff),与整体设计风格统一

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lzh
2026-03-01 16:28:16 +08:00
parent 0c5ac04069
commit 562f0a1753

View File

@@ -422,34 +422,11 @@ function getStatusDistributionChartOptions(): ECOption {
return `${marker}${params.name}<br/><span style="font-size:16px;font-weight:600">${params.value}</span> 个 <span style="color:#8c8c8c;margin-left:4px">${params.percent}%</span>`;
},
},
legend: {
orient: 'vertical',
right: '4%',
top: 'center',
itemWidth: 10,
itemHeight: 10,
itemGap: 14,
icon: 'circle',
textStyle: { fontSize: 12, color: '#595959' },
formatter: (name: string) => {
const item = statusDistribution.find((d) => d.name === name);
if (!item) return name;
const pct = total > 0 ? ((item.value / total) * 100).toFixed(1) : '0';
return `${name} {val|${item.value}} {pct|${pct}%}`;
},
textStyle: {
fontSize: 12,
color: '#595959',
rich: {
val: { fontSize: 13, fontWeight: 600, color: '#262626', padding: [0, 4, 0, 8] },
pct: { fontSize: 11, color: '#8c8c8c' },
},
},
},
legend: { show: false },
graphic: [
{
type: 'text',
left: '23%',
left: 'center',
top: '38%',
style: {
text: `${total}`,
@@ -461,7 +438,7 @@ function getStatusDistributionChartOptions(): ECOption {
},
{
type: 'text',
left: '23%',
left: 'center',
top: '55%',
style: {
text: '近7天工单',
@@ -476,7 +453,7 @@ function getStatusDistributionChartOptions(): ECOption {
name: '工单状态分布',
type: 'pie',
radius: ['48%', '70%'],
center: ['25%', '50%'],
center: ['50%', '50%'],
avoidLabelOverlap: false,
label: { show: false },
emphasis: {
@@ -709,7 +686,7 @@ function getBadgeQueueChartOptions(): ECOption {
textStyle: { color: '#262626', fontSize: 13 },
formatter: (params: any) => {
const param = params[0];
return `<span style="color:#8c8c8c">${param.name}</span><br/><span style="font-size:16px;font-weight:600;color:#722ed1">${param.value}</span> <span style="color:#8c8c8c">个排队</span>`;
return `<span style="color:#8c8c8c">${param.name}</span><br/><span style="font-size:16px;font-weight:600;color:#1677ff">${param.value}</span> <span style="color:#8c8c8c">个排队</span>`;
},
},
grid: {
@@ -746,8 +723,8 @@ function getBadgeQueueChartOptions(): ECOption {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: val === maxVal ? '#531dab' : '#722ed1' },
{ offset: 1, color: val === maxVal ? '#9254de' : '#d3adf7' },
{ offset: 0, color: val === maxVal ? '#0958d9' : '#1677ff' },
{ offset: 1, color: val === maxVal ? '#4096ff' : '#91caff' },
],
},
borderRadius: [6, 6, 0, 0],
@@ -758,7 +735,7 @@ function getBadgeQueueChartOptions(): ECOption {
position: 'top',
fontSize: 11,
fontWeight: '600',
color: '#722ed1',
color: '#1677ff',
formatter: (params: any) => params.value > 0 ? params.value : '',
},
emphasis: {
@@ -767,8 +744,8 @@ function getBadgeQueueChartOptions(): ECOption {
type: 'linear',
x: 0, y: 0, x2: 0, y2: 1,
colorStops: [
{ offset: 0, color: '#391085' },
{ offset: 1, color: '#722ed1' },
{ offset: 0, color: '#003eb3' },
{ offset: 1, color: '#0958d9' },
],
},
},