kunshan/src/views/map/components/PurposeSpecialFunds.vue

<template>
  <div class="right-card">
    <m-card title="水系分布" :height="400">
      <div class="water-distribution-container">
        <!-- 上部：横向柱状图 -->
        <div class="chart-section">
          <v-chart ref="vChart" :option="chartOption" :autoresize="true" />
        </div>
        
        <!-- 下部：表格 -->
        <div class="table-section">
          <div class="table-header">
            <div class="header-item">名称</div>
            <div class="header-item">类型</div>
            <div class="header-item">河长/面积</div>
          </div>
          <div class="table-body">
            <div class="table-row" v-for="(item, index) in waterSystemTableData" :key="index">
              <div class="row-item">{{ item.name }}</div>
              <div class="row-item">{{ item.type }}</div>
              <div class="row-item">{{ item.lengthOrArea }}</div>
            </div>
          </div>
        </div>
      </div>
    </m-card>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue"
import mCard from "@/components/mCard/index.vue"
import * as echarts from "echarts"
import VChart from "vue-echarts"

// 柱状图数据
const chartOption = ref({
  grid: {
    left: "5%",
    top: "10%",
    right: "5%",
    bottom: "10%",
    containLabel: true
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    },
    backgroundColor: "rgba(0,0,0,0.8)",
    borderColor: "#3F5B73",
    textStyle: {
      color: "#FFFFFF"
    }
  },
  xAxis: {
    type: "category",
    data: ["河道干流", "河道支流", "湖泊"],
    axisLine: {
      lineStyle: {
        color: "#3F5B73"
      }
    },
    axisLabel: {
      color: "#D3F8F2",
      fontSize: 12
    }
  },
  yAxis: {
    type: "value",
    axisLine: {
      lineStyle: {
        color: "#3F5B73"
      }
    },
    axisLabel: {
      color: "#D3F8F2",
      fontSize: 12
    },
    splitLine: {
      lineStyle: {
        color: "rgba(63, 91, 115, 0.3)"
      }
    }
  },
  series: [
    {
      data: [
        {
          value: 15,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "rgba(3,65,128,1)" },
              { offset: 1, color: "rgba(115,208,255,1)" }
            ])
          }
        },
        {
          value: 110,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "rgba(11, 77, 44, 1)" },
              { offset: 1, color: "rgba(77, 255, 181, 1)" }
            ])
          }
        },
        {
          value: 38,
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              { offset: 0, color: "rgba(153, 105, 38, 1)" },
              { offset: 1, color: "rgba(255, 200, 89, 1)" }
            ])
          }
        }
      ],
      type: "bar",
      barWidth: "40%",
      label: {
        show: true,
        position: "top",
        color: "#D3F8F2",
        fontSize: 12
      }
    }
  ]
})

// 表格数据
const waterSystemTableData = reactive([
  { name: "娄江", type: "河道", lengthOrArea: "15.2 km" },
  { name: "吴淞江", type: "河道", lengthOrArea: "18.7 km" },
  { name: "淀山湖", type: "湖泊", lengthOrArea: "62 km²" },
  { name: "阳澄湖", type: "湖泊", lengthOrArea: "120 km²" },
  { name: "青阳港", type: "河道", lengthOrArea: "8.5 km" },
  { name: "杨林塘", type: "河道", lengthOrArea: "12.3 km" },
  { name: "急水港", type: "河道", lengthOrArea: "9.8 km" },
  { name: "千灯浦", type: "河道", lengthOrArea: "7.6 km" },
  { name: "大直港", type: "河道", lengthOrArea: "6.9 km" },
  { name: "小直港", type: "河道", lengthOrArea: "5.4 km" },
  { name: "茆沙塘", type: "河道", lengthOrArea: "8.2 km" },
  { name: "张家港河", type: "河道", lengthOrArea: "10.5 km" },
  { name: "七浦塘", type: "河道", lengthOrArea: "11.7 km" },
  { name: "白茆塘", type: "河道", lengthOrArea: "9.3 km" },
  { name: "傀儡湖", type: "湖泊", lengthOrArea: "3.8 km²" },
  { name: "鳗鲡湖", type: "湖泊", lengthOrArea: "2.5 km²" },
  { name: "金鸡湖", type: "湖泊", lengthOrArea: "7.4 km²" },
  { name: "独墅湖", type: "湖泊", lengthOrArea: "11.5 km²" }
])

</script>

<style lang="scss">
.water-distribution-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 10px;
  box-sizing: border-box;
}

.chart-section {
  height: 150px;
  margin-bottom: 10px;
}

.table-section {
  flex: 1;
  min-height: 100px;
  background-color: rgba(10, 40, 60, 0.3);
  border-radius: 4px;
  border: 1px solid rgba(63, 91, 115, 0.3);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  background-color: rgba(10, 40, 60, 0.5);
  padding: 10px 0;
  color: #30DCFF;
  font-weight: bold;
  border-bottom: 1px solid rgba(63, 91, 115, 0.5);
  flex-shrink: 0;
}

.header-item {
  flex: 1;
  text-align: center;
  font-size: 12px;
}

.table-body {
  flex: 1;
  overflow-y: auto;
  max-height: 120px;
}

.table-row {
  display: flex;
  padding: 8px 0;
  border-bottom: 1px solid rgba(63, 91, 115, 0.2);
  color: #D3F8F2;
  font-size: 12px;
  
  &:last-child {
    border-bottom: none;
  }
}

.row-item {
  flex: 1;
  text-align: center;
}

/* 滚动条样式 */
.table-body::-webkit-scrollbar {
  width: 6px;
}

.table-body::-webkit-scrollbar-track {
  background: rgba(10, 40, 60, 0.3);
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-thumb {
  background: rgba(48, 220, 255, 0.5);
  border-radius: 3px;
}

.table-body::-webkit-scrollbar-thumb:hover {
  background: rgba(48, 220, 255, 0.8);
}
</style>