|
|
@@ -1,201 +1,218 @@
|
|
|
<template>
|
|
|
<div class="right-card">
|
|
|
- <m-card title="测站统计" :height="200">
|
|
|
- <v-chart ref="vChart" :option="option" :autoresize="true" />
|
|
|
+ <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, onMounted, onBeforeUnmount, nextTick } from "vue"
|
|
|
-import * as echarts from "echarts"
|
|
|
+import { ref, reactive } from "vue"
|
|
|
import mCard from "@/components/mCard/index.vue"
|
|
|
+import * as echarts from "echarts"
|
|
|
import VChart from "vue-echarts"
|
|
|
|
|
|
-const option = ref({
|
|
|
+// 柱状图数据
|
|
|
+const chartOption = ref({
|
|
|
grid: {
|
|
|
left: "5%",
|
|
|
top: "10%",
|
|
|
- width: "90%",
|
|
|
- height: "86%",
|
|
|
- },
|
|
|
- legend: {
|
|
|
- top: "8%",
|
|
|
- icon: "circle",
|
|
|
- itemWidth: 8,
|
|
|
- itemHeight: 8,
|
|
|
- textStyle: {
|
|
|
- color: "#90979c",
|
|
|
- fontSize: 12,
|
|
|
- lineHeight: 20,
|
|
|
- },
|
|
|
+ right: "5%",
|
|
|
+ bottom: "10%",
|
|
|
+ containLabel: true
|
|
|
},
|
|
|
-
|
|
|
tooltip: {
|
|
|
trigger: "axis",
|
|
|
axisPointer: {
|
|
|
- type: "shadow",
|
|
|
- shadowStyle: { opacity: 0.2 },
|
|
|
+ type: "shadow"
|
|
|
},
|
|
|
- backgroundColor: "rgba(0,0,0,1)",
|
|
|
- borderWidth: 1,
|
|
|
- borderColor: "#999999",
|
|
|
+ backgroundColor: "rgba(0,0,0,0.8)",
|
|
|
+ borderColor: "#3F5B73",
|
|
|
textStyle: {
|
|
|
- color: "#ffffff",
|
|
|
- fontSize: 10,
|
|
|
- lineHeight: 156,
|
|
|
- },
|
|
|
+ color: "#FFFFFF"
|
|
|
+ }
|
|
|
},
|
|
|
- color: ["#6BC7F6", "#44E6A2"],
|
|
|
- xAxis: [
|
|
|
- {
|
|
|
- type: "value",
|
|
|
- interval: 0,
|
|
|
-
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: "#407A80",
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: "#CFDAE6",
|
|
|
- fontSize: 10,
|
|
|
- interval: 0,
|
|
|
- },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: ["河道干流", "河道支流", "湖泊"],
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#3F5B73"
|
|
|
+ }
|
|
|
},
|
|
|
- ],
|
|
|
-
|
|
|
- yAxis: [
|
|
|
- {
|
|
|
- type: "category",
|
|
|
- inverse: true,
|
|
|
- axisLabel: {
|
|
|
- color: "#CFDAE6",
|
|
|
- fontSize: 10,
|
|
|
- interval: 0,
|
|
|
- show: false,
|
|
|
- verticalAlign: "top",
|
|
|
- },
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- show: false,
|
|
|
- },
|
|
|
- data: ["扶贫资金", "医疗卫生", "渔业资金", "社区改造"],
|
|
|
+ axisLabel: {
|
|
|
+ color: "#D3F8F2",
|
|
|
+ fontSize: 12
|
|
|
+ }
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ type: "value",
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#3F5B73"
|
|
|
+ }
|
|
|
},
|
|
|
- {
|
|
|
- inverse: true,
|
|
|
- axisLine: {
|
|
|
- show: false,
|
|
|
- lineStyle: {
|
|
|
- color: "rgba(0,0,0,0)",
|
|
|
- },
|
|
|
- },
|
|
|
- data: [],
|
|
|
+ axisLabel: {
|
|
|
+ color: "#D3F8F2",
|
|
|
+ fontSize: 12
|
|
|
},
|
|
|
- ],
|
|
|
- color: ["rgba(115,208,255,1)", "rgba(77, 255, 181, 1)", "rgba(230, 230, 230, 1)", "rgba(255, 200, 89, 1)"],
|
|
|
+ splitLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "rgba(63, 91, 115, 0.3)"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
series: [
|
|
|
{
|
|
|
data: [
|
|
|
{
|
|
|
- value: 100,
|
|
|
+ value: 15,
|
|
|
itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
|
|
+ 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)" },
|
|
|
- ]),
|
|
|
- },
|
|
|
+ { offset: 1, color: "rgba(115,208,255,1)" }
|
|
|
+ ])
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
- value: 80,
|
|
|
+ value: 110,
|
|
|
itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
|
|
+ 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: 60,
|
|
|
- itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
|
|
- { offset: 0, color: "rgba(117, 117, 117, 1)" },
|
|
|
- { offset: 1, color: "rgba(230, 230, 230, 1)" },
|
|
|
- ]),
|
|
|
- },
|
|
|
+ { offset: 1, color: "rgba(77, 255, 181, 1)" }
|
|
|
+ ])
|
|
|
+ }
|
|
|
},
|
|
|
{
|
|
|
- value: 50,
|
|
|
+ value: 38,
|
|
|
itemStyle: {
|
|
|
- color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
|
|
|
+ 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)" },
|
|
|
- ]),
|
|
|
- },
|
|
|
- },
|
|
|
+ { offset: 1, color: "rgba(255, 200, 89, 1)" }
|
|
|
+ ])
|
|
|
+ }
|
|
|
+ }
|
|
|
],
|
|
|
type: "bar",
|
|
|
- barWidth: 7,
|
|
|
- yAxisIndex: 0,
|
|
|
- showBackground: false,
|
|
|
- z: 2,
|
|
|
+ barWidth: "40%",
|
|
|
label: {
|
|
|
show: true,
|
|
|
- position: "middle",
|
|
|
- padding: [-18, 0, 0, 0],
|
|
|
- color: "#16C1A6",
|
|
|
- fontSize: 12,
|
|
|
- formatter:
|
|
|
- "{title|{b}} {value|{c}} {unit|万元}",
|
|
|
- rich: {
|
|
|
- title: {
|
|
|
- color: "#FFFFFF",
|
|
|
- fontSize: 10,
|
|
|
- },
|
|
|
- value: {
|
|
|
- fontSize: 10,
|
|
|
- },
|
|
|
- unit: {
|
|
|
- color: "#717477",
|
|
|
- fontSize: 10,
|
|
|
- },
|
|
|
- },
|
|
|
- },
|
|
|
- itemStyle: {
|
|
|
- borderRadius: 0,
|
|
|
- borderWidth: 2,
|
|
|
- borderColor: "rgba(26, 57, 77,1)",
|
|
|
- },
|
|
|
- },
|
|
|
- {
|
|
|
- name: "背景",
|
|
|
- type: "bar",
|
|
|
- yAxisIndex: 1,
|
|
|
- barGap: "-100%",
|
|
|
- data: [120, 120, 120, 120],
|
|
|
- barWidth: 10,
|
|
|
- z: 0,
|
|
|
- itemStyle: {
|
|
|
- color: "none",
|
|
|
- borderColor: "rgba(172,191,188,0.4)",
|
|
|
- borderWidth: 1,
|
|
|
- borderRadius: 0,
|
|
|
- },
|
|
|
- },
|
|
|
- ],
|
|
|
+ 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" }
|
|
|
+])
|
|
|
+
|
|
|
</script>
|
|
|
|
|
|
-<style lang="scss"></style>
|
|
|
+<style lang="scss">
|
|
|
+.water-distribution-container {
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 10px;
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.chart-section {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 150px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.table-section {
|
|
|
+ flex: 1;
|
|
|
+ min-height: 120px;
|
|
|
+ background-color: rgba(10, 40, 60, 0.3);
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid rgba(63, 91, 115, 0.3);
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.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);
|
|
|
+}
|
|
|
+
|
|
|
+.header-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.table-body {
|
|
|
+ height: calc(100% - 40px);
|
|
|
+ overflow-y: auto;
|
|
|
+}
|
|
|
+
|
|
|
+.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>
|
BAI