2026.3.20

feiyu02

2026-03-20 20cdb83586daabfb15fc056c4c97eb8e7ccaf928

 src/components/monitor/DistrictRanking.vue

@@ -24,25 +24,31 @@
        </el-radio-group>
      </el-col>
    </el-row>
    <div ref="rankingChart" class="chart-container"></div>
    <el-table :data="sortedRankingData" style="width: 100%" stripe class="ranking-table">
      <el-table-column label="排名" type="index" width="80" />
      <el-table-column prop="name" label="区县名称" />
      <el-table-column prop="value" label="浓度均值 (mg/m³)" />
      <el-table-column label="排名变化" width="120">
        <template #default="scope">
          <div v-if="scope.row.rankChange > 0" class="rank-up">
            <el-icon><ArrowUp /></el-icon> {{ scope.row.rankChange }}
          </div>
          <div v-else-if="scope.row.rankChange < 0" class="rank-down">
            <el-icon><ArrowDown /></el-icon> {{ Math.abs(scope.row.rankChange) }}
          </div>
          <div v-else class="rank-no-change">
            <el-icon><Minus /></el-icon> 0
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-row :gutter="20">
      <el-col :span="10">
        <div ref="rankingChart" class="chart-container"></div>
      </el-col>
      <el-col :span="14">
        <el-table :data="sortedRankingData" size="small" stripe class="ranking-table">
          <el-table-column label="排名" type="index" width="80" />
          <el-table-column prop="name" label="区县名称" />
          <el-table-column prop="value" label="浓度均值 (mg/m³)" />
          <el-table-column label="排名变化" width="120">
            <template #default="scope">
              <div v-if="scope.row.rankChange > 0" class="rank-up">
                <el-icon><ArrowUp /></el-icon> {{ scope.row.rankChange }}
              </div>
              <div v-else-if="scope.row.rankChange < 0" class="rank-down">
                <el-icon><ArrowDown /></el-icon> {{ Math.abs(scope.row.rankChange) }}
              </div>
              <div v-else class="rank-no-change">
                <el-icon><Minus /></el-icon> 0
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </el-card>
</template>

@@ -112,26 +118,29 @@
          },
        },
        grid: {
          left: '3%',
          left: '0%',
          right: '4%',
          bottom: '3%',
          bottom: '6%',
          top: '4%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          data: this.sortedRankingData.map((item) => item.name),
          type: 'value',
          nameLocation: 'middle',
          nameGap: 30,
          name: this.rankingType === 'hourly' ? '小时均值 (mg/m³)' : '月均值 (mg/m³)',
        },
        yAxis: {
          type: 'value',
          name: this.rankingType === 'hourly' ? '小时均值 (mg/m³)' : '月均值 (mg/m³)',
          type: 'category',
          data: this.sortedRankingData.map((item) => item.name).reverse(),
        },
        series: [
          {
            name: '浓度均值',
            type: 'bar',
            data: this.sortedRankingData.map((item) => parseFloat(item.value)),
            data: this.sortedRankingData.map((item) => parseFloat(item.value)).reverse(),
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                { offset: 0, color: '#83bff6' },
                { offset: 0.5, color: '#188df0' },
                { offset: 1, color: '#188df0' },
@@ -153,7 +162,7 @@
}
</script>

<style scoped>
<style scoped lang="scss">
.section {
  margin-bottom: 20px;
}
@@ -165,7 +174,7 @@
}

.chart-container {
  height: 300px;
  height: 400px;
  width: 100%;
}