首页-控制模式: 饼图左侧图例 10 字截断 + 省略号 + hover 完整名 + mock 加长名样本验证

src/components/ui/TickDonutChart.vue

@@ -3,7 +3,7 @@
     <div class="custom-legend">
       <div class="legend-item" v-for="(item, index) in chartData" :key="index">
         <span class="color-dot" :style="{ backgroundColor: item.color }"></span>
-        <span class="legend-name">{{ item.name }}</span>
+        <span class="legend-name" :title="item.name">{{ truncateName(item.name) }}</span>
         <span class="legend-value" v-if="item.value !== undefined && item.value !== null" :style="{ color: item.color }">
           {{ item.value }}
         </span>
@@ -67,6 +67,12 @@ export default {
     this.initChart();
   },
   methods: {
+    // 左侧图例最多 10 个字，超过用省略号；hover 显示完整名 (template 的 :title)
+    truncateName(name) {
+      if (!name) return '';
+      const s = String(name);
+      return s.length > 10 ? s.slice(0, 10) + '…' : s;
+    },
     initChart() {
       this.$_chart = echarts.init(this.$refs.chartRef);
       this.updateChart();
@@ -187,7 +193,13 @@ export default {
   color: #cccccc; /* 文字偏灰蓝色 */
   font-size: 12px;
   line-height: 18px;
-  width: 75px; /* 固定宽度，让后面的数字对齐 */
+  /* 10 个中文字 ≈ 120px (12px 字号)；template 端已 JS 截断, CSS 兜底防溢出 */
+  flex: 1;
+  min-width: 0;
+  max-width: 130px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .legend-value {

src/mock/mock_data.json

@@ -15501,7 +15501,7 @@
         "color": "#eab308"
       },
       {
-        "name": "自适应控制",
+        "name": "自适应控制（学习型干线协调）",
         "value": 71,
         "color": "#2dd4bf"
       }