style(ops): 饼图去掉图例仅保留悬浮卡片,柱状图紫色改为蓝色
- 状态分布饼图:移除右侧 legend 图例,饼图居中显示,仅通过 hover tooltip 查看详情 - 工牌队列柱状图:紫色系(#722ed1)改为蓝色系(#1677ff),与整体设计风格统一 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -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' },
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user