添加折线图表与条形图表

src/components/Platform/ShiKongFenXi/TimeSpatialQuery/TimeSpatialQuery/5FarmlandCropMonitor.vue

@@ -141,6 +141,8 @@
 
     </div>
     <ResultTablePannle1 :attrArr="attrArr" :tableData="tableData" v-show="isShowResultPannle1"></ResultTablePannle1>
+    <bar></bar>
+    <linechart></linechart>
   </div>
 
 
@@ -157,6 +159,8 @@ import ResultTablePannle1 from "../TimeSpatialQuery/ResultTablePannle1.vue";
 import Dth from "./dthlib.js";
 import DrawTool from "../../lib/DrawTool.js";
 import DrawTool1 from "../../lib/drawCircle.js"
+import bar from "../../../../echarts/bar.vue";
+import linechart from "../../../../echarts/linechart.vue";
 var dthObj = null
 export default {
   data() {
@@ -299,7 +303,9 @@ export default {
   },
   components: {
     ResultTablePannle,
-    ResultTablePannle1
+    ResultTablePannle1,
+    bar,
+    linechart
   },
   methods: {
 

src/components/Platform/ShiKongFenXi/lib/axiosRequestAPI.js

@@ -5,7 +5,67 @@ class AxiosRequestAPI {
   constructor() {
     this.doQueryUrl = '/public/pgBase/doQuery'
     this.geoQueryUrl = "/search/geoQuery"
+    this.doQueryUrl1 = '/searchtubiao/getClassAreaSum'
+
+  }
+  listShapeArea() {
+    // 定义多个表名
+    const tableNames = [
+      'ty2014_shuiti',
+      'ty2017_1_jianzhuwu',
+      'ty2021_jianzhu',
+      'ty2023_shuiti'
+    ];
+
+    // 使用 UNION ALL 来将所有表的查询结果合并
+    const sql = tableNames.map(table =>
+      `SELECT class_name, SUM(shape_area) AS total_area 
+       FROM ${table} 
+       GROUP BY class_name`
+    ).join(' UNION ALL ');
+
+    // 定义查询参数
+    const params = {
+      sql: sql
+    };
+
+    return new Promise((resolve, reject) => {
+      axios_8004.get(this.doQueryUrl, { params })
+        .then(data => {
+          // 如果查询成功，返回查询到的 rows 数据
+          resolve(data.data.rows);
+        })
+        .catch(error => {
+          // 处理请求或查询失败的情况
+          console.error("查询失败:", error);
+          reject(error);
+        });
+    });
   }
+
+
+  //用于查询指定表的 class_name 和 shape_area
+  listClassNameAndShapeArea() {
+    let tableName = "jjj2019_1__cc1407252017000258";  // 指定表名
+    const params = {
+      sql: `SELECT class_name, SUM(shape_area) AS total_area 
+            FROM ${tableName} GROUP BY class_name`
+    };
+
+    return new Promise((resolve, reject) => {
+      axios_8004.get(this.doQueryUrl, {
+        params
+      }).then(data => {
+        // 如果查询成功，返回查询到的 rows 数据
+        resolve(data.data.rows);
+      }).catch(error => {
+        // 处理请求或查询失败的情况
+        console.error("查询失败:", error);
+        reject(error);
+      });
+    });
+  }
+
   // 获取某个表的所有geom数据
   listAllGeomByTableName(tableName) {
 

src/components/echarts/bar.vue

@@ -0,0 +1,108 @@
+<template>
+    <div>
+        <div ref="chart" class="chart"></div>
+    </div>
+</template>
+
+<script>
+// 导入 ECharts 库
+import * as echarts from 'echarts';
+// 导入自定义的 axios 实例
+import axiosRequestAPI from '../Platform/ShiKongFenXi/lib/axiosRequestAPI';
+
+export default {
+    name: 'MyChart',
+    data() {
+        return {
+            xAxisData: [],   // 存储 class_name 数据
+            yAxisData: [],   // 存储每个 class_name 对应的 shape_area 总和
+        };
+    },
+    mounted() {
+        this.fetchData();  // 在 mounted 生命周期钩子中调用 fetchData 获取数据
+    },
+    methods: {
+        // 初始化图表
+        initChart() {
+            const chartDom = this.$refs.chart;
+            const myChart = echarts.init(chartDom);
+
+            const option = {
+                title: {
+                    text: '用地类型',
+                    textStyle: {
+                        color: '#000000', // 设置标题颜色
+                        fontWeight: 'bold',
+                        fontSize: 18
+                    }
+                },
+                tooltip: {},
+                legend: {
+                    data: ['面积总和'],
+                    textStyle: {
+                        color: '#000000', // 设置图例字体颜色
+                    }
+                },
+                xAxis: {
+                    data: this.xAxisData,
+                    axisLabel: {
+                        interval: 0,  // 强制显示所有标签
+                        color: '#000000', // 设置 X 轴标签字体颜色
+                    }
+                },
+                yAxis: {
+                    axisLabel: {
+                        color: '#000000', // 设置 Y 轴标签字体颜色
+                    }
+                },
+                series: [
+                    {
+                        name: '面积总和',
+                        type: 'bar',
+                        data: this.yAxisData,
+                    }
+                ]
+            };
+
+            myChart.setOption(option);
+
+            // 自动调整图表大小
+            window.addEventListener('resize', () => {
+                myChart.resize();
+            });
+        },
+
+        // 获取数据
+        fetchData() {
+            axiosRequestAPI.listClassNameAndShapeArea()
+                .then((data) => {
+                    console.log("Fetched data:", data);  // 打印原始数据
+                    if (Array.isArray(data)) {
+                        this.xAxisData = data.map(item => item.class_name);  // 获取 class_name
+                        this.yAxisData = data.map(item => item.total_area);  // 获取 total_area（面积总和）
+                        this.initChart();  // 数据加载完成后初始化图表
+                    } else {
+                        console.error('返回的数据格式不正确');
+                    }
+                })
+                .catch((error) => {
+                    console.error('获取数据失败:', error);
+                });
+        }
+
+    }
+};
+</script>
+
+<style scoped>
+.chart {
+    width: 100%;
+    height: 280px;
+    width: 550px;
+    position: absolute;
+    bottom: 0px;
+    right: -2000px;
+    z-index: 1000000;
+    background-color: rgba(240, 248, 255, 0.2);
+}
+</style>

src/components/echarts/linechart.vue

@@ -0,0 +1,96 @@
+<template>
+    <div id="myChart"></div>
+</template>
+
+<script>
+import axiosRequestAPI from '../Platform/ShiKongFenXi/lib/axiosRequestAPI';
+export default {
+    name: 'MyLineChart',
+    data() {
+        return {
+
+            yAxisData: [],   // 存储每个 class_name 对应的 shape_area 总和
+        };
+    },
+    mounted() {
+        // 初始化图表
+        this.drawLine();
+        this.fetchData()
+    },
+    methods: {
+        drawLine() {
+            // 获取图表的 DOM 元素
+            const chartDom = document.getElementById('myChart');
+            // 初始化 ECharts 实例
+            const myChart = this.$echarts.init(chartDom);
+            // 图表配置项
+            const option = {
+                title: {
+                    text: '太原市水体区域面积变化',
+                    textStyle: {
+                        color: '#000000', // 设置标题文字为黑色
+                    }
+                },
+                xAxis: {
+                    type: 'category',
+                    data: ['2014', '2017', '2021', '2023'],
+                    axisLabel: {
+                        color: '#000000', // 设置 X 轴文字为黑色
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    axisLabel: {
+                        color: '#000000', // 设置 Y 轴文字为黑色
+                    },
+                    axisLine: {
+                        lineStyle: {
+                            color: '#000000', // 设置 Y 轴轴线为黑色
+                        }
+                    }
+                },
+                series: [
+                    {
+                        data: this.yAxisData,
+                        type: 'line', // 图表类型
+                        label: {
+                            color: '#000000', // 设置数据点标签文字为黑色
+                        },
+                    },
+                ],
+            };
+
+            // 设置图表的配置项
+            myChart.setOption(option);
+        },
+        fetchData() {
+            axiosRequestAPI.listShapeArea()
+                .then((data) => {
+                    console.log("Fetched data:", data);  // 打印原始数据
+                    if (Array.isArray(data)) {
+                        this.yAxisData = data.map(item => item.total_area);  // 获取 total_area（面积总和）
+                        this.drawLine();  // 数据加载完成后初始化图表
+                    } else {
+                        console.error('返回的数据格式不正确');
+                    }
+                })
+                .catch((error) => {
+                    console.error('获取数据失败:', error);
+                });
+        }
+    },
+};
+</script>
+
+<style scoped>
+#myChart {
+    /* 居中显示图表 */
+    position: absolute;
+    width: 550px;
+    height: 280px;
+    top: 0px;
+    right: -2000px;
+    z-index: 20330;
+    background-color: rgba(240, 248, 255, 0.2);
+}
+</style>

static/AppConfig.js

@@ -75,36 +75,36 @@ window.AppConfig = {
       type: 'group',
       name: '空间查询',
       label: '空间查询',
+      // children: [
+      //   {
+      //     type: 'group',
+      //     name: '空间查询',
+      //     label: '数据加载',
       children: [
-        {
-          type: 'group',
-          name: '空间查询',
-          label: '数据加载',
-          children: [
 
-            {
-              type: 'geojson_mian',
-              name: 'jjj202308_2__cc1407252017000258',
-              label: '寿阳县2019年-2m'
-            },
-            {
-              type: 'geojson_mian',
-              name: 'jjj2019_1__cc1407252017000258',
-              label: '寿阳县2023年-1m'
-            },
-            {
-              type: 'geojson_mian',
-              name: 'jjj201908_1__128_cc1410022017000325_4326',
-              label: '尧都区2019年8月—1m'
-            },
-            {
-              type: 'geojson_mian',
-              name: 'poi',
-              label: '天镇poi'
-            },
-          ]
+        {
+          type: 'geojson_mian',
+          name: 'jjj202308_2__cc1407252017000258',
+          label: '寿阳县2019年-2m'
+        },
+        {
+          type: 'geojson_mian',
+          name: 'jjj2019_1__cc1407252017000258',
+          label: '寿阳县2023年-1m'
+        },
+        {
+          type: 'geojson_mian',
+          name: 'jjj201908_1__128_cc1410022017000325_4326',
+          label: '尧都区2019年8月—1m'
+        },
+        {
+          type: 'geojson_mian',
+          name: 'poi',
+          label: '天镇poi'
+        },
+      ]
 
-        }]
+      // }]
     },
     {
       type: 'group',

static/lib/uninpho/Resources/licConfig.json

@@ -1 +1 @@
-100495F024E444DA543E04503DF24D4CC9AF152B16D85E4A90AA9657DC023AED0310B5606413419E6DCCEB27C288C8A5
+100495F024E444DA543E04503DF24D4CC9AF152B16D85E4A90AA9657DC023AEDFEBA17B825A5201A386C707478EDA9D5