mayiming/shixi2026vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wangran
2026-01-10 16:29:04 +08:00
parent c772664cde
commit ea66d7aadc
1 changed files with 62 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/views/data-connection/Req16RateStatView.vue
View File

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