2026.3.4

riku

2026-03-04 49e2b7ea866695957633855f71f9e2f943b11ec7

 src/components/monitor/DistrictRanking.vue

@@ -24,8 +24,12 @@
        </el-radio-group>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="10">
    <div ref="rankingChart" class="chart-container"></div>
    <el-table :data="sortedRankingData" style="width: 100%" stripe class="ranking-table">
      </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³)" />
@@ -43,6 +47,8 @@
        </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%;
}