Accueil Explorer Aide
Connexion
baixuanda
/
BAIWebCS
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

添加图表

WQQ il y a 3 mois
Parent
2b8202f5e9
commit
2cf4ca2526
6 fichiers modifiés avec 1118 ajouts et 22 suppressions
Vue séparée Afficher les stats Diff
  1. 109 0
      WebVue/TaiHufenglang/CesiumMap
  2. 908 15
      WebVue/TaiHufenglang/package-lock.json
  3. 6 2
      WebVue/TaiHufenglang/package.json
  4. 3 2
      WebVue/TaiHufenglang/src/components/charts/chart1.vue
  5. 90 2
      WebVue/TaiHufenglang/src/components/charts/chart3.vue
  6. 2 1
      WebVue/TaiHufenglang/vite.config.js

+ 109 - 0
WebVue/TaiHufenglang/CesiumMap
Voir le fichier 

@@ -0,0 +1,109 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>无锡市汛期水文监测系统 - 2025乙巳蛇年</title>
 
+    <!-- Cesium核心依赖 -->
 
+    <link href="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
 
+    <script src="https://cesium.com/downloads/cesiumjs/releases/1.107/Build/Cesium/Cesium.js"></script>
 
+    <style>
 
+        #cesium-container {
 
+            width: 100%;
 
+            height: 100vh;
 
+            position: relative;
 
+        }
 
+
 
+        .water-level-panel {
 
+            position: absolute;
 
+            bottom: 20px;
 
+            right: 20px;
 
+            background: rgba(12, 45, 70, 0.85);
 
+            padding: 15px;
 
+            border-radius: 8px;
 
+            color: white;
 
+            font-family: "Microsoft YaHei", sans-serif;
 
+            z-index: 100;
 
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
 
+        }
 
+
 
+        .lunar-date {
 
+            position: absolute;
 
+            top: 20px;
 
+            left: 20px;
 
+            background: rgba(70, 130, 180, 0.8);
 
+            padding: 10px 15px;
 
+            border-radius: 6px;
 
+            color: white;
 
+            font-size: 1.1em;
 
+            z-index: 100;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div id="map-container" class="map-container"></div>
 
+
 
+    <script>
 
+        import { ref, onMounted, onUnmounted } from 'vue'
 
+        import AMapLoader from '@amap/amap-jsapi-loader'
 
+        import Header from './header.vue'
 
+        import Gradientoverlay from './gradient-overlay.vue'
 
+        import Leftmoudle from './leftmodul.vue'
 
+        import Rightmoudle from './rightmodul.vue'
 
+        import Middlemoudle from './middlemodul.vue'
 
+
 
+
 
+
 
+        // 地图实例
 
+        const map = ref(null)
 
+
 
+        // 地图配置
 
+        const mapConfig = {
 
+            viewMode: '3D',
 
+            zoom: 13,
 
+            center: [120.21937542, 31.568152],
 
+            pitch: 45,
 
+            features: ['bg', 'road', 'building'],
 
+            buildingAnimation: true,
 
+            showLabel: false
 
+        }
 
+
 
+        // 初始化地图
 
+        const initMap = async () => {
 
+            try {
 
+                window._AMapSecurityConfig = {
 
+                    securityJsCode: 'b87476c68ed625e2d337f160d0ba6122'
 
+                }
 
+
 
+                const AMap = await AMapLoader.load({
 
+                    key: '694aba7c51008bf8c08afc94aa566fc1',
 
+                    version: '2.0',
 
+                    plugins: ['AMap.Scale', 'AMap.ToolBar']
 
+                })
 
+
 
+                map.value = new AMap.Map('map-container', {
 
+                    ...mapConfig,
 
+                    layers: [
 
+                        new AMap.TileLayer.Satellite(),
 
+                        new AMap.TileLayer.RoadNet()
 
+                    ]
 
+                })
 
+
 
+                // 添加控件
 
+                map.value.addControl(new AMap.Scale())
 
+                map.value.addControl(new AMap.ToolBar())
 
+            } catch (error) {
 
+                console.error('地图初始化失败:', error)
 
+                alert('高德地图加载失败，请检查控制台错误')
 
+            }
 
+        }
 
+
 
+        // 生命周期
 
+        onMounted(() => initMap())
 
+        onUnmounted(() => map.value?.destroy())
 
+    </script>
 
+</body>
 
+
 
+</html>

Fichier diff supprimé car celui-ci est trop grand
+ 908 - 15
WebVue/TaiHufenglang/package-lock.json


+ 6 - 2
WebVue/TaiHufenglang/package.json
Voir le fichier 

@@ -14,11 +14,15 @@
 
     "@jiaminghi/data-view-react": "^1.2.5",
 
     "autofit.js": "^3.2.8",
 
     "echarts": "^5.6.0",
 
-    "vue": "^3.5.13"
 
+    "vue": "^3.5.13",
 
+    "vue-cesium": "^3.2.9"
 
   },
 
   "devDependencies": {
 
     "@vitejs/plugin-vue": "^5.2.3",
 
-    "vite": "^6.2.4",
 
+    "cesium": "^1.131.0",
 
+    "copy-webpack-plugin": "^5.1.2",
 
+    "vite": "^6.3.5",
 
+    "vite-plugin-cesium": "^1.2.23",
 
     "vite-plugin-vue-devtools": "^7.7.2"
 
   }
 
 }

+ 3 - 2
WebVue/TaiHufenglang/src/components/charts/chart1.vue
Voir le fichier 

@@ -29,7 +29,8 @@ function chartInit() {
 
             {
 
                 name: '站点统计',
 
                 type: 'pie',
 
-                radius: '50%',
 
+                radius: ['30%', '60%'],  // ★ 改为环形增加层次感 
+                center: ['50%', '60%'],  // ★ 核心优化：饼图下移8%
 
                 data: [
 
                     { value: 1048, name: '水位站' },
 
                     { value: 735, name: '雨量站' },
 
@@ -55,7 +56,7 @@ function chartInit() {
 
     <div class="box" style="flex:0 1 30%;">
 
         <div class="title">站点统计</div>
 
         <div class="boxstyle">
 
-            <div ref="chart" style="width: 100%;height:100%;top: 20px;"></div>
 
+            <div ref="chart" style="width: 100%;height:100%;top: 20px;bottom: 0px"></div>
 
         </div>
 
     </div>
 
 </template>

+ 90 - 2
WebVue/TaiHufenglang/src/components/charts/chart3.vue
Voir le fichier 

@@ -1,9 +1,97 @@
 
-<script></script>
 
+<script setup>
 
+import { ref, onMounted } from 'vue'
 
+import * as echarts from 'echarts';
 
+
 
+const chart = ref();
 
+onMounted(() => {    //加载图表
 
+    chartInit()
 
+})
 
+function chartInit() {
 
+    var myChart = echarts.init(chart.value);
 
+    // 指定图表的配置项和数据
 
+    var option = {
 
+        grid: {
 
+            left: '3%',
 
+            right: '3%',
 
+            top: '15%',
 
+            bottom: '15%',  // 增加底部空间 
+            containLabel: true
 
+        },
 
+        legend: {
 
+            data: ['超警戒', '超保证'],  // 明确图例项
 
+            textStyle: {
 
+                fontSize: 12,           // 字体大小适配 
+                color: '#fff'            // 字体颜色适配
 
+            }
 
+        },
 
+        tooltip: {
 
+            trigger: 'axis',
 
+            axisPointer: { type: 'shadow' }
 
+        },
 
+        dataset: {
 
+            source: [
 
+                ['类型', '超警戒', '超保证'],  // 列标题
 
+                ['河道', 12, 4],              // 示例数据 
+                ['大中型水库', 8, 2],         // 示例数据
 
+                ['闸坝', 5, 1],              // 示例数据
 
+                ['潮位', 9, 3]               // 示例数据 
+            ]
 
+        },
 
+        xAxis: {
 
+            type: 'category',
 
+            data: ['河道', '大中型水库', '闸坝', '潮位'],  // 指定横轴项 
+            axisLine: {
 
+                lineStyle: {
 
+                    color: '#00ffe4',  // 蓝色实线 
+                    width: 2
 
+                }
 
+            },
 
+            axisTick: {
 
+                show: false  // 隐藏刻度线 
+            }
 
+        },
 
+        yAxis: {
 
+            type: 'value',
 
+            name: '数量（个）',  // 纵轴标题 
+            axisLine: {
 
+                show: true,
 
+                lineStyle: {
 
+                    color: '#00ffe4',  // 蓝色实线
 
+                    width: 2
 
+                }
 
+            },
 
+            splitLine: {
 
+                show: false  // 去除网格线
 
+            }
 
+        },
 
+        series: [
 
+            {
 
+                name: '超警戒',
 
+                type: 'bar',
 
+                itemStyle: {
 
+                    color: '#0090ff'  // 蓝色 
+                }
 
+            },
 
+            {
 
+                name: '超保证',
 
+                type: 'bar',
 
+                itemStyle: {
 
+                    color: '#FF4500'  // 红色
 
+                }
 
+            }
 
+        ]
 
+    }
 
+    // 使用刚指定的配置项和数据显示图表。
 
+    myChart.setOption(option);
 
+}
 
+</script>
 
 
 <template>
 
     <div class="box" style="flex:0 1 33.33%;">
 
         <div class="title">超警超保统计</div>
 
-        <div class="boxstyle"></div>
 
+        <div class="boxstyle">
 
+            <div ref="chart" style="width: 100%; height:120%;top: 30px;bottom: 0px;"></div>
 
+        </div>
 
     </div>
 
 </template>

+ 2 - 1
WebVue/TaiHufenglang/vite.config.js
Voir le fichier 

@@ -1,5 +1,5 @@
 
 import { fileURLToPath, URL } from 'node:url'
 
-
 
+// import { Cesium } from 'vite-plugin-cesium';
 
 import { defineConfig } from 'vite'
 
 import vue from '@vitejs/plugin-vue'
 
 import vueDevTools from 'vite-plugin-vue-devtools'
 
@@ -9,6 +9,7 @@ export default defineConfig({
 
   plugins: [
 
     vue(),
 
     vueDevTools(),
 
+    // Cesium()
 
   ],
 
   resolve: {
 
     alias: {

Certains fichiers n'ont pas été affichés car il y a eu trop de fichiers modifiés dans ce diff