Add operator color mapping and legend to Req16RateStatView: enhance chart visualization with distinct colors for each operator and include a legend for clarity.

src/views/data-connection/Req16RateStatView.vue

@@ -22,6 +22,13 @@ const operatorMap: Record<string, string> = {
   CTCC: '中国电信'
 }
 
+// 运营商颜色映射（与上方图例颜色保持一致）
+const operatorColorMap: Record<string, string> = {
+  CMCC: '#ff8a48', // 橙色
+  CUCC: '#4b9cff', // 蓝色
+  CTCC: '#c572ff' // 紫色
+}
+
 // 初始化图表
 const initChart = () => {
   if (!chartContainer.value) return
@@ -102,19 +109,14 @@ const updateChart = (data: ConnectionRateItem[]) => {
         type: 'bar',
         data: rates,
         itemStyle: {
-          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            { offset: 0, color: '#83bff6' },
-            { offset: 0.5, color: '#188df0' },
-            { offset: 1, color: '#188df0' }
-          ])
+          color: (params: any) => {
+            const item = sortedData[params.dataIndex]
+            return operatorColorMap[item.operator] || '#83bff6'
+          }
         },
         emphasis: {
           itemStyle: {
-            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-              { offset: 0, color: '#2378f7' },
-              { offset: 0.7, color: '#2378f7' },
-              { offset: 1, color: '#83bff6' }
-            ])
+            opacity: 0.9
           }
         },
         label: {
@@ -227,6 +229,22 @@ onUnmounted(() => {
       </button>
     </div>
 
+    <!-- 运营商图例标签 -->
+    <div class="operator-legend">
+      <div class="legend-item">
+        <span class="legend-color legend-cmcc"></span>
+        <span class="legend-text">CMCC</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color legend-cucc"></span>
+        <span class="legend-text">CUCC</span>
+      </div>
+      <div class="legend-item">
+        <span class="legend-color legend-ctcc"></span>
+        <span class="legend-text">CTCC</span>
+      </div>
+    </div>
+
     <div class="chart-container" ref="chartContainer"></div>
   </div>
 </template>
@@ -287,6 +305,40 @@ h2 {
   cursor: not-allowed;
 }
 
+.operator-legend {
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-bottom: 8px;
+  padding: 4px 12px 0;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: #4b5563;
+}
+
+.legend-color {
+  width: 18px;
+  height: 8px;
+  border-radius: 999px;
+}
+
+.legend-cmcc {
+  background-color: #ff8a48;
+}
+
+.legend-cucc {
+  background-color: #4b9cff;
+}
+
+.legend-ctcc {
+  background-color: #c572ff;
+}
+
 .chart-container {
   width: 100%;
   height: calc(100vh - 200px);