echarts分页

screen-demo/src/views/templateInstance.vue

@@ -111,10 +111,11 @@
         </div>
         <div id="echarts2" style="width: 100%; height: 47vh">
         </div>
-        <div class="jl-page">
+        <div class="jl-page" style="width: 200px; overflow: auto; white-space: nowrap;">
           <span>&lt;</span>
-          <b class="on">1</b>
-
+          <span v-for="(index) in (total)" :key="index" style="display: inline-block;">
+            <b class="on" @click="selectPage(index)">{{index}}</b>
+           </span>
           <span>&gt;</span>
         </div>
       </div>
@@ -290,7 +291,7 @@ export default {
       end:'',
       trees: [],
       currentPage1: 1,
-      total: 0,
+      total: [],
       timeX: [],
       list:[],
       // activeMode: "satellite", // 默认地图图层类型
@@ -848,9 +849,14 @@ export default {
       })
 
     },
-    btnMethod(num){
+    //分页查数据 echarts
+    selectPage(page){
+      console.log("页数",page)
+      this.btnMethod(this.selectedButton,page)
+    },
+    btnMethod(num,page){
       this.selectedButton = num
-      let param = {"areaBoxNum":this.areaBoxNum};
+      let param = {"areaBoxNum":this.areaBoxNum,pageSize:9,pageNum:page?page:1};
       if (num == 0 || !num) {
         this.$requestSDK(
             "/jilin-devloper/jilin/getEvenAreaCompletion",
@@ -858,7 +864,11 @@ export default {
             {},
             "post"
         ).then(res => {
+          this.total = []
           let result = res.rows;
+          for (let i = 0; i < res.total/9; i++) {
+            this.total.push(i+1)
+          }
           let keys1 = result.map(item => item.regionName) ;
           // let keys2 = result.map(item => item.realNum );
           let keys2 = result.map(item => item.allNum);