树种分布统计读取真实接口

src/dataSchema/page2Char2Schema.js

@@ -40,6 +40,36 @@ let page2Char2Schema = {
             color: "rgba(255, 255, 255, 1)"
         }
     },
+    dataZoom: [
+        {
+            xAxisIndex: 0, //这里是从X轴的0刻度开始
+            show: true, //是否显示滑动条，不影响使用
+            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+            startValue: 0, // 从头开始。
+            endValue: 7, // 一次性展示6个
+            height: 8, //组件高度
+            bottom: 30,
+            borderColor: 'rgba(43,48,67,.1)',
+            fillerColor: 'rgb(36,71,141)',
+            zoomLock: true,
+            showDataShadow: false, //是否显示数据阴影 默认auto
+            backgroundColor: '#051A3B',
+            showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
+            realtime: true, //是否实时更新
+            filterMode: 'filter',
+            handleIcon: 'M-9.35,34.56V42m0-40V9.5m-2,0h4a2,2,0,0,1,2,2v21a2,2,0,0,1-2,2h-4a2,2,0,0,1-2-2v-21A2,2,0,0,1-11.35,9.5Z',
+            handleStyle: {
+                color: 'rgb(36,71,141)',
+                borderColor: 'rgb(36,71,141)',
+            },
+            moveHandleSize: 20,
+            moveOnMouseMove: true,
+            maxValueSpan: 7,
+            minValueSpan: 7,
+            moveHandleSize: 0,
+            brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
+        },
+    ],
     series: [
         {
             name: '松树',

src/service/index.js

@@ -66,12 +66,12 @@ export const page2echarts01 = (data) =>
         prefixUrl: 'api2',
     })
 
-// export const page2echarts02 = (data) =>
-//     callApi({
-//         url: 'smallClass/treeDist',
-//         data,
-//         prefixUrl: 'api2',
-//     })
+export const page2echarts02 = (data) =>
+    callApi({
+        url: 'smallClass/treeDist',
+        data,
+        prefixUrl: 'api2',
+    })
 
 
 

src/views/index.vue

@@ -269,18 +269,67 @@
         })
       },
       getPage2echarts02(){
-        page2echarts02().then(res=>{
+        let param = {
+          smallNumber:this.xiaobaninput,
+          cityId:this.vuexSelectCity,
+          countyId:this.vuexSelectDistrict,
+          townId:this.vuexSelectStreet,
+        }
+        page2echarts02(param).then(res=>{
           // console.log('res',res);
           // this.page2Char2 = res.data;
+          //  console.log('this.page2Char2.series', this.page2Char2.series);
           
-          // this.page2Char2.xAxis[0] = [];
-          // this.page2Char2.series[0] = [];
-          // res.data&&res.data.forEach(element=>{
-          //   this.page2Char2.xAxis[0].push(element.smallNumber);
-          //   this.page2Char2.series[0].push({
+          this.page2Char2.xAxis.data = [];
+          this.page2Char2.series = [];
 
-          //   });
-          // })
+          const rows  = res.rows;
+          console.log(rows)
+          // x坐标
+           this.page2Char2.xAxis.data = rows.map(item => {
+            return item.smallNumber
+          })
+          console.log('x坐标',  this.page2Char2.xAxis.data)
+          // 获取所有项
+          let seriesList = rows.map(item => {
+            return item.treeList
+          })
+          // 数组扁平化
+          seriesList = seriesList.flat()
+          // 去重
+          let obj = {};
+              seriesList = seriesList.reduce((newArr, next) => {
+                obj[next.name] ? "" : (obj[next.name] = true && newArr.push(next));
+                return newArr;
+              }, []);
+              seriesList = seriesList.map(item => {
+                return {
+                  name : item.name,
+              type: 'bar',
+              stack: 'total',
+              label: {
+                show: false
+              },
+              emphasis: {
+                focus: 'series'
+              },
+                  data: []
+                }
+              })
+              console.log(seriesList)
+              rows.forEach(item => {
+            seriesList.forEach((jtem, index) => {
+              let num = 0
+              item.treeList.map(ktem => {
+                if (ktem.name.indexOf(jtem.name) > (-1)) {
+                  num = ktem.value
+                }
+              })
+              seriesList[index].data.push(num)
+            })
+          })
+          console.log(seriesList)
+          this.page2Char2.series = seriesList;
 
           let charUuid = this.$refs.page2Char2.mid;
           this.$refs.page2Char2.intChar(charUuid)
@@ -336,7 +385,12 @@
         })
       },
        getPage6echarts01(){
-        page6echarts01().then(res=>{
+        let param = {
+          cityId:this.vuexSelectCity,
+          countyId:this.vuexSelectDistrict,
+          townId:this.vuexSelectStreet,
+        }
+        page6echarts01(param).then(res=>{
           // console.log('res',res);
           // this.page6Char1 = res.data;
 
@@ -351,9 +405,6 @@
             this.page6Char1.series[2].data.push(element.pestCount);
           })
 
-          console.log('this.page6Char1.xAxis[0].data',this.page6Char1.xAxis[0].data);
-          console.log('this.page6Char1.series',this.page6Char1.series);
-
           let charUuid = this.$refs.page6Char1.mid;
           this.$refs.page6Char1.intChar(charUuid)
         }).catch(err=>{