条形图修改

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

@@ -34,11 +34,8 @@
       <el-tree class="treeclass scrollbarcustom" :data="treeLayerData" show-checkbox :props="defaultProps"
         @check-change="handleLayerCheck" highlight-current node-key="name">
         <span slot-scope="{ node, data }" style="width: 100%">
-          <div>
-            {{ node.label }}
-          </div>
-        </span>
-      </el-tree>
+          <div> {{ node.label }}</div>
+        </span></el-tree>
       <div>
         <div class="queryHeader">查询功能</div>
         <!-- <div class="queryHeader">空间查询</div> -->
@@ -141,7 +138,9 @@
 
     </div>
     <ResultTablePannle1 :attrArr="attrArr" :tableData="tableData" v-show="isShowResultPannle1"></ResultTablePannle1>
-    <bar></bar>
+
+    <bar :nodeName="nodeName"></bar>
+
     <linechart></linechart>
   </div>
 
@@ -165,6 +164,7 @@ var dthObj = null
 export default {
   data() {
     return {
+      nodeName: '',
       treeLayerData: [],
       treeData: [
         {
@@ -311,7 +311,9 @@ export default {
 
     handleLayerCheck(node, checked) {
       if (checked) {
+        this.nodeName = node.name;
         this._addLayer(node.name, 1);
+        console.log(node.name);
       }
       else {
         primitiveLayerManager.removeLayerChange(1);
@@ -334,22 +336,6 @@ export default {
         this.flyTo(this.centroid.centroidX, this.centroid.centroidY);
       });
     },
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 
 
 
@@ -689,11 +675,11 @@ export default {
       // 根据复选框状态控制节点的显隐
       if (checked) {
         // 如果当前复选框被选中，刷新树数据并加载对应图层
-        node.visible = true;
+        this.nodeName = node.name;
         // this.updateTreeData();
       } else {
         // 如果当前复选框被选中变为未选中，清除所有图层
-        node.visible = false;
+        this.nodeName = '';
         this.removeSelectLayer();
         // this.updateTreeData();
       }

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

@@ -45,8 +45,9 @@ class AxiosRequestAPI {
 
 
   //用于查询指定表的 class_name 和 shape_area
-  listClassNameAndShapeArea() {
-    let tableName = "jjj2019_1__cc1407252017000258";  // 指定表名
+  listClassNameAndShapeArea(nodeName) {
+    // let tableName = "jjj2019_1__cc1407252017000258";  // 指定表名
+    let tableName = nodeName;
     const params = {
       sql: `SELECT class_name, SUM(shape_area) AS total_area 
             FROM ${tableName} GROUP BY class_name`

src/components/echarts/bar.vue

@@ -1,6 +1,7 @@
 <template>
     <div>
-        <div ref="chart" class="chart"></div>
+        <!-- 如果 nodeName 不为空，才渲染图表 -->
+        <div v-if="nodeName" ref="chart" class="chart"></div>
     </div>
 </template>
 
@@ -12,14 +13,30 @@ import axiosRequestAPI from '../Platform/ShiKongFenXi/lib/axiosRequestAPI';
 
 export default {
     name: 'MyChart',
+    props: {
+        nodeName: {
+            type: String,
+            required: false
+        }
+    },
     data() {
         return {
-            xAxisData: [],   // 存储 class_name 数据
-            yAxisData: [],   // 存储每个 class_name 对应的 shape_area 总和
+            xAxisData: [],
+            yAxisData: []
         };
     },
-    mounted() {
-        this.fetchData();  // 在 mounted 生命周期钩子中调用 fetchData 获取数据
+    watch: {
+        // 监听 nodeName 的变化，动态加载图表
+        nodeName(newNodeName) {
+            if (newNodeName) {
+                // 如果有 nodeName，加载数据并渲染图表
+                this.fetchData(newNodeName);
+            } else {
+                // 如果没有 nodeName，不显示图表并清空数据
+                this.xAxisData = [];
+                this.yAxisData = [];
+            }
+        }
     },
     methods: {
         // 初始化图表
@@ -31,7 +48,7 @@ export default {
                 title: {
                     text: '用地类型',
                     textStyle: {
-                        color: '#000000', // 设置标题颜色
+                        color: '#000000',
                         fontWeight: 'bold',
                         fontSize: 18
                     }
@@ -40,19 +57,19 @@ export default {
                 legend: {
                     data: ['面积总和'],
                     textStyle: {
-                        color: '#000000', // 设置图例字体颜色
+                        color: '#000000',
                     }
                 },
                 xAxis: {
                     data: this.xAxisData,
                     axisLabel: {
-                        interval: 0,  // 强制显示所有标签
-                        color: '#000000', // 设置 X 轴标签字体颜色
+                        interval: 0,
+                        color: '#000000',
                     }
                 },
                 yAxis: {
                     axisLabel: {
-                        color: '#000000', // 设置 Y 轴标签字体颜色
+                        color: '#000000',
                     }
                 },
                 series: [
@@ -65,22 +82,20 @@ export default {
             };
 
             myChart.setOption(option);
-
-            // 自动调整图表大小
             window.addEventListener('resize', () => {
                 myChart.resize();
             });
         },
 
         // 获取数据
-        fetchData() {
-            axiosRequestAPI.listClassNameAndShapeArea()
+        fetchData(nodeName) {
+            axiosRequestAPI.listClassNameAndShapeArea(nodeName)
                 .then((data) => {
-                    console.log("Fetched data:", data);  // 打印原始数据
+                    console.log("Fetched data for", nodeName, ":", 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();  // 数据加载完成后初始化图表
+                        this.xAxisData = data.map(item => item.class_name);
+                        this.yAxisData = data.map(item => item.total_area);
+                        this.initChart();
                     } else {
                         console.error('返回的数据格式不正确');
                     }
@@ -89,11 +104,13 @@ export default {
                     console.error('获取数据失败:', error);
                 });
         }
-
     }
 };
 </script>
 
+
+
+
 <style scoped>
 .chart {
     width: 100%;