林下经济对接口

src/dataSchema/page1Char1Schema.js

@@ -21,6 +21,36 @@ let page1Char1Schema = {
         bottom: '20px',
         right: '24px'
     },
+    // dataZoom: [
+    //     {
+    //         xAxisIndex: 0, //这里是从X轴的0刻度开始
+    //         show: true, //是否显示滑动条，不影响使用
+    //         type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
+    //         startValue: 0, // 从头开始。
+    //         endValue: 7, // 一次性展示6个
+    //         height: 8, //组件高度
+    //         bottom: 10,
+    //         borderColor: 'transparent',
+    //         fillerColor: '#14c6d3',
+    //         zoomLock: true,
+    //         showDataShadow: false, //是否显示数据阴影 默认auto
+    //         backgroundColor: '#0b1511',
+    //         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: 'transparent',
+    //         },
+    //         moveHandleSize: 20,
+    //         moveOnMouseMove: true,
+    //         maxValueSpan: 7,
+    //         minValueSpan: 7,
+    //         moveHandleSize: 0,
+    //         brushSelect: false, //刷选功能，设为false可以防止拖动条长度改变 ************（这是一个坑）
+    //     },
+    // ],
     xAxis: {
         data: ['清镇林场', '三都林场', '榕江林场', '水东林场', '甜蜜林场', '贵阳林场'],
         axisLabel: {

src/dataSchema/page5Char1Schema.js

@@ -0,0 +1,48 @@
+/*
+ * @LastEditors: gcz
+ */
+/*
+ * @LastEditors: gcz
+ */
+import themeColor from "./color"
+let page5Char1Schema = {
+    title: {
+        text: '占地面积统计(亩)',
+        textStyle: {
+            color: '#02EEFF',
+        },
+        show: false
+
+    },
+    grid: {
+        containLabel: true,
+        top: "20px",
+        left: '10px',
+        bottom: '20px',
+        right: '24px'
+    },
+    tooltip: {},
+    xAxis: {
+        data: ['榕江县草珊瑚育苗基地', '榕江县乐乡村养殖基地'],
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
+        }
+    },
+    yAxis: {
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
+        }
+    },
+    series: [
+        {
+            name: '占地面积',
+            type: 'bar',
+            data: [235, 302],
+            itemStyle: {
+                color: '#02EEFF'
+            }
+
+        }
+    ]
+}
+export default page5Char1Schema

src/dataSchema/page5Char2Schema.js

@@ -0,0 +1,51 @@
+/*
+ * @LastEditors: gcz
+ */
+/*
+ * @LastEditors: gcz
+ */
+/*
+ * @LastEditors: gcz
+ */
+import themeColor from "./color"
+let page5Char2Schema = {
+    title: {
+        text: '基地数量统计(个)',
+        textStyle: {
+            color: '#02EEFF',
+        },
+        show: false
+
+    },
+    grid: {
+        containLabel: true,
+        top: "20px",
+        left: '10px',
+        bottom: '20px',
+        right: '24px'
+    },
+    tooltip: {},
+    xAxis: {
+        data: ['榕江县草珊瑚育苗基地', '榕江县乐乡村养殖基地'],
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
+        }
+    },
+    yAxis: {
+        axisLabel: {
+            color: "rgba(255, 255, 255, 1)"
+        }
+    },
+    series: [
+        {
+            name: '数量统计',
+            type: 'bar',
+            data: [235, 302],
+            itemStyle: {
+                color: '#02EEFF'
+            }
+
+        }
+    ]
+}
+export default page5Char2Schema

src/service/index.js

@@ -134,7 +134,7 @@ export const financeCateInfo = (data) =>
     })
 
 //林下经济-占地面积统计
-export const financeBaseArea = (data) =>
+export const page5echarts01 = (data) =>
     callApi({
         url: 'finance/baseArea',
         data,
@@ -142,7 +142,7 @@ export const financeBaseArea = (data) =>
     })
 
 //林下经济-基地数量统计
-export const financeBaseCount = (data) =>
+export const page5echarts02 = (data) =>
     callApi({
         url: 'finance/baseCount',
         data,

src/views/index.vue

@@ -56,18 +56,18 @@
     <section class="left-wrap" v-if="$store.state.addr.page=='economics'">
       <!-- <Typeslide :data="typeSlideData" /> -->
       <Numerical class="left-item" :data="page5numerical" />
-      <MyEcharts
-        class="left-item chart-wrap"
-        mid="page5Char1"
-        ref="page5Char1"
-        :option="page5Char1"
-      />
       <MyEcharts
         class="left-item chart-wrap"
         mid="page5Char2"
         ref="page5Char2"
         :option="page5Char2"
       />
+      <MyEcharts
+        class="left-item chart-wrap"
+        mid="page5Char1"
+        ref="page5Char1"
+        :option="page5Char1"
+      />
     </section>
 
     <!-- 事件信息 -->
@@ -140,7 +140,8 @@ import page1Char1Schema from '../dataSchema/page1Char1Schema';
 import page1Char2Schema from '../dataSchema/page1Char2Schema';
 import page2Char1Schema from '../dataSchema/page2Char1Schema';
 import page2Char2Schema from '../dataSchema/page2Char2Schema';
-// import page5Char1Schema from '../dataSchema/page5Char1Schema';
+import page5Char1Schema from '../dataSchema/page5Char1Schema';
+import page5Char2Schema from '../dataSchema/page5Char2Schema';
 import page6Char1Schema from '../dataSchema/page6Char1Schema';
 
 // import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data';
@@ -189,8 +190,8 @@ export default {
       page2Char2: page2Char2Schema,
       page5numerical: [],
       typeSlideData: [],
-      page5Char1: {},
-      page5Char2: {},
+      page5Char1: page5Char1Schema,
+      page5Char2: page5Char2Schema,
       page6numerical: [],
       page6Char1: page6Char1Schema,
       xiaobaninput: ''
@@ -269,7 +270,7 @@ export default {
         this.getRightScrollData();
       } else if (this.$store.state.addr.page == 'economics') {
         this.getPage5numerical();
-        this.getTypeSlideData();
+        // this.getTypeSlideData();
         this.getPage5echarts01();
         this.getPage5echarts02();
         this.getRightScrollData();
@@ -518,7 +519,13 @@ export default {
       page5echarts01(param)
         .then((res) => {
           // console.log('res',res);
-          this.page5Char1 = res.data;
+          // this.page5Char1 = res.data;
+          this.page5Char1.xAxis.data = res.data.map((item) => {
+            return item.baseName;
+          });
+          this.page5Char1.series[0].data = res.data.map((item) => {
+            return item.baseArea;
+          });
           let charUuid = this.$refs.page5Char1.mid;
           this.$refs.page5Char1.intChar(charUuid);
         })
@@ -535,9 +542,15 @@ export default {
       page5echarts02(param)
         .then((res) => {
           // console.log('res',res);
-          this.page5Char2 = res.data;
+          // this.page5Char2 = res.data;
+          this.page5Char2.xAxis.data = res.data.map((item) => {
+            return item.name;
+          });
+          this.page5Char2.series[0].data = res.data.map((item) => {
+            return item.number;
+          });
           let charUuid = this.$refs.page5Char2.mid;
-          this.$refs.page5Char1.intChar(charUuid);
+          this.$refs.page5Char2.intChar(charUuid);
         })
         .catch((err) => {
           console.log('getPage5echarts02 err', err);