diff --git a/src/views/data-connection/Req16RateStatView.vue b/src/views/data-connection/Req16RateStatView.vue index 8305aa4..c088ee4 100644 --- a/src/views/data-connection/Req16RateStatView.vue +++ b/src/views/data-connection/Req16RateStatView.vue @@ -22,6 +22,13 @@ const operatorMap: Record = { CTCC: '中国电信' } +// 运营商颜色映射(与上方图例颜色保持一致) +const operatorColorMap: Record = { + 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(() => { + +
+
+ + CMCC +
+
+ + CUCC +
+
+ + CTCC +
+
+
@@ -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);