From efe8992022a1c4c8bb876cc2659e3954079637d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=90=B4=E6=98=8A=E5=A4=A9?= <442384644@qq.com>
Date: Thu, 22 Oct 2026 13:19:00 +0800
Subject: [PATCH] =?UTF-8?q?style(=E7=BB=9F=E8=AE=A1):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=BB=9F=E8=AE=A1=E6=9D=A5=E6=BA=90=E4=B8=8E?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E6=A8=A1=E5=9D=97=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 左右卡片等宽等高对齐，修复全局 ivu-mt 导致的顶部错位
- 占比进度条与百分比列自适应对齐，0% 显示灰色轨道
- 饼图复用 ECharts 实例、稳定容器 ID，过滤 0 值扇区并调整图例/标签布局
---
 .../admin/src/components/echarts/index.vue    | 54 +++++++++++++++----
 .../admin/src/pages/statistic/order/index.vue | 51 +++++++++++-------
 2 files changed, 77 insertions(+), 28 deletions(-)

diff --git a/frontend/admin/src/components/echarts/index.vue b/frontend/admin/src/components/echarts/index.vue
index 2dd52048c..c669b202a 100644
--- a/frontend/admin/src/components/echarts/index.vue
+++ b/frontend/admin/src/components/echarts/index.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick, getCurrentInstance } from 'vue';
 // 统一从按需注册入口引入（echarts/core）
 import * as echarts from '@/libs/echarts';
 
@@ -32,9 +32,9 @@ let myChart = null;
 const infoLists = ref(props.infoList);
 const seriesArray = ref(props.series);
 
-const echartsId = computed(() => {
-  return 'echarts' + Math.ceil(Math.random() * 100);
-});
+// 组件实例 uid 保证同一页面多个图表容器 id 唯一，避免随机数碰撞导致图表渲染到错误节点
+const instance = getCurrentInstance();
+const echartsId = computed(() => `echarts-${instance ? instance.uid : Date.now()}`);
 
 watch(
   () => props.infoList,
@@ -54,11 +54,21 @@ watch(
 );
 
 function wsFunc() {
-  myChart.resize();
+  if (myChart) {
+    myChart.resize();
+  }
 }
 
 function handleSetVisitChart() {
-  myChart = echarts.init(document.getElementById(echartsId.value));
+  const dom = document.getElementById(echartsId.value);
+  // 数据 watcher 可能在挂载前触发，容器未就绪时跳过，挂载后统一初始化
+  if (!dom) {
+    return;
+  }
+  // 复用实例，不能每次数据变化都重复 init（会产生 “chart instance already initialized” 并导致图表空白）
+  if (!myChart) {
+    myChart = echarts.init(dom);
+  }
   let option = null;
   if (props.echartsTitle === 'circle') {
     option = {
@@ -68,16 +78,40 @@ function handleSetVisitChart() {
       },
       legend: {
         orient: 'vertical',
-        left: 'right',
+        right: 12,
+        top: 'middle',
+        itemWidth: 10,
+        itemHeight: 10,
+        itemGap: 12,
+        textStyle: {
+          color: '#606266',
+          fontSize: 12,
+        },
         data: infoLists.value.bing_xdata || [],
       },
       series: [
         {
           name: '访问来源',
           type: 'pie',
-          radius: '70%',
-          center: ['50%', '60%'],
-          data: infoLists.value.bing_data || [],
+          radius: '58%',
+          center: ['42%', '50%'],
+          avoidLabelOverlap: true,
+          minAngle: 3,
+          label: {
+            show: true,
+            // 0 值扇区不显示标签，避免全部堆在圆心附近
+            formatter: (params) => (Number(params.value) > 0 ? `${params.name}\n${params.percent}%` : ''),
+            color: '#606266',
+            fontSize: 12,
+            lineHeight: 18,
+          },
+          labelLine: {
+            length: 12,
+            length2: 8,
+            lineStyle: { color: '#c0c4cc' },
+          },
+          // 0 值分类不绘制扇区，避免零角度扇区的标签/引导线堆积在圆心
+          data: (infoLists.value.bing_data || []).filter((item) => Number(item.value) > 0),
           emphasis: {
             itemStyle: {
               shadowBlur: 10,
diff --git a/frontend/admin/src/pages/statistic/order/index.vue b/frontend/admin/src/pages/statistic/order/index.vue
index 86f927b3a..8293b7c3c 100644
--- a/frontend/admin/src/pages/statistic/order/index.vue
+++ b/frontend/admin/src/pages/statistic/order/index.vue
@@ -338,47 +338,62 @@ function getTrend() {
 }
 .code-row-bg {
   display: flex;
-  flex-wrap: nowrap;
-  justify-content: space-between;
+  align-items: stretch;
+  gap: 16px;
 }
 .code-row-bg .ivu-mt {
-  width: calc(50% - 8px);
+  flex: 1;
+  min-width: 0;
+  width: auto;
+  /* .ivu-mt 的全局 margin-top 只作用于第二张卡，导致左右卡片顶部错位 */
+  margin-top: 0 !important;
 }
 .ech-box {
   margin-top: 10px;
 }
 .change-style {
-  border: 1px solid #ccc;
+  border: 1px solid var(--prev-border-color-base, #dcdfe6);
   border-radius: 15px;
-  padding: 0px 10px;
+  padding: 0 10px;
   cursor: pointer;
+  color: var(--prev-color-text-regular, #606266);
 }
 .percent-box {
   display: flex;
   align-items: center;
-  padding-right: 10px;
+  gap: 8px;
 }
 .line {
-  width: 100%;
-  position: relative;
-}
-.bg {
-  position: absolute;
-  width: 100%;
+  flex: 1;
+  min-width: 40px;
   height: 8px;
   border-radius: 8px;
   background-color: #f2f2f2;
+  overflow: hidden;
+}
+.bg {
+  display: none;
 }
 .percent {
-  position: absolute;
-  border-radius: 5px;
-  height: 8px;
+  height: 100%;
+  border-radius: 8px;
   background-color: var(--prev-color-primary);
-  z-index: 999;
 }
 .num {
+  flex: 0 0 52px;
+  width: 52px;
+  margin: 0;
+  text-align: right;
   white-space: nowrap;
-  margin: 0 10px;
-  width: 20px;
+  color: var(--prev-color-text-regular, #606266);
+  font-size: 12px;
+}
+@media (max-width: 1200px) {
+  .code-row-bg {
+    flex-wrap: wrap;
+  }
+  .code-row-bg .ivu-mt {
+    flex-basis: 100%;
+  }
 }
 </style>