地图下钻，柱状图

src/views/dataJq/dataV.vue

@@ -26,7 +26,8 @@
           </div>
           <div>
             <!-- <mapBox></mapBox> -->
-            <mapBoxForBingTu></mapBoxForBingTu>
+            <!-- <mapBoxForBingTu></mapBoxForBingTu> -->
+            <mapBoxForZhuZhuangTu></mapBoxForZhuZhuangTu>
           </div>
         </div>
         <div class="jqBoxS_con_rightCon">
@@ -66,6 +67,7 @@ import mapCount from "./mapCount.vue";
 // 地图
 import mapBox from "./mapBox.vue";
 import mapBoxForBingTu from "./mapBoxForBingTu.vue";
+import mapBoxForZhuZhuangTu from "./mapBoxForZhuZhuangTu.vue";
 import { postRequest } from "@/api/dogView.js";
 export default {
   components: {
@@ -78,6 +80,7 @@ export default {
     mapCount,
     mapBox,
     mapBoxForBingTu,
+    mapBoxForZhuZhuangTu,
   },
   data() {
     return {

src/views/dataJq/mapBoxForBingTu.vue

@@ -195,7 +195,7 @@ export default {
                   coordinateSystem: "geo",
                   label: {
                     show: true,
-                    color: "#000",
+                    color: "#fff",
                     fontSize: 12,
                     fontFamily: "Microsoft YaHei",
                     formatter: (params) => {

src/views/dataJq/mapBoxForZhuZhuangTu.vue

+<template>
+  <div
+    style="position: relative"
+    v-loading="loading"
+    element-loading-text="拼命加载中"
+    element-loading-spinner="el-icon-loading"
+    element-loading-background="rgba(0, 0, 0, 0.8)"
+  >
+    <!-- 回退 -->
+    <div
+      id="on-back"
+      class="back"
+      v-show="showBack"
+      @click="goBack"
+    >回退</div>
+    <div
+      id="myEacherForMap"
+      style="width:66.08333rem;height: 50.3333rem"
+    ></div>
+  </div>
+</template>
+
+<script>
+import * as city from "@/utils/cityData.js";
+import { jsonRequest } from "@/api/dogView.js";
+
+export default {
+  data() {
+    return {
+      showBack: false,
+      loading: false,
+
+      fileName: "china",
+      myChart: null,
+      colorDatas: [
+        "rgb(255, 84, 84)",
+        "rgb(255, 158, 84)",
+        "rgb(49, 255, 162)",
+        "rgb(49, 174, 255)",
+      ],
+      options: {
+        geo: {
+          map: "",
+          aspectScale: 0.75,
+          roam: true,
+          // zoom: 1.1, // 备注：下级是柱状图时，zoom属性不能设置，否则会出问题
+          itemStyle: {
+            areaColor: "#1b8cff",
+            color: "#fff",
+            borderColor: "#fff",
+            borderWidth: 0.4,
+            borderType: "solid",
+            // shadowBlur: 10,
+            // shadowColor: 'transparent',//'#0c3662',
+            // shadowOffsetX: 10,
+            // shadowOffsetY: 3,
+            opacity: 1,
+          },
+          label: {
+            show: true,
+            color: "#fff",
+            align: "center",
+            verticalAlign: "middle",
+          },
+          emphasis: {
+            label: {
+              show: true,
+              color: "#fff",
+            },
+            itemStyle: {
+              areaColor: "#0c3662",
+            },
+          },
+          z: 3,
+        },
+        series: [],
+      },
+      legendData: [],
+      barLabel: {
+        show: true,
+        position: "top",
+        color: "#fff",
+        fontSize: 12,
+      },
+
+      log: ["china"],
+      provinces: [],
+      dataArr: [],
+    };
+  },
+  created() {
+    this.provinces = city.provinceCode;
+  },
+  mounted() {
+    this.getDatas();
+  },
+  methods: {
+    getMapData(e) {
+      let arr = [];
+      return new Promise((resolve) => {
+        jsonRequest("/homePage/getQgMapNum", {
+          unitcode: e ? e + "000000" : "",
+        }).then((res) => {
+          if (e == undefined || e == "undefined") {
+            resolve(res);
+          } else {
+            for (let i = 0; i < res.data.rows.length; i++) {
+              if (res.data.rows[i].dognum != 0) {
+                arr.push(res.data.rows[i]);
+              }
+            }
+            res.data.rows = arr;
+            resolve(res);
+          }
+        });
+      });
+    },
+    drawEcharts() {
+      if (this.myChart) this.myChart.dispose();
+
+      this.loading = true;
+      $.getJSON(`/map/${this.fileName}.json`, (data) => {
+        if (data && data.features && data.features.length) {
+          this.loading = false;
+          this.$echarts.registerMap(this.fileName, data);
+
+          this.myChart = this.$echarts.init(
+            document.getElementById("myEacherForMap")
+          );
+
+          this.options.series = [];
+
+          this.options.geo.map = this.fileName;
+
+          let levelFlag = "1";
+          if (this.fileName === "china") {
+            if (this.options.grid) delete this.options.grid;
+            if (this.options.xAxis) delete this.options.xAxis;
+            if (this.options.yAxis) delete this.options.yAxis;
+            if (this.options.tooltip) delete this.options.tooltip;
+            if (this.options.legend) delete this.options.legend;
+            this.options.series.push({
+              type: "scatter",
+              coordinateSystem: "geo",
+              data: this.dataArr,
+              roam: true,
+              zoom: 1.1,
+              z: 4,
+              label: {
+                show: true,
+                color: "#333333",
+                width: 13,
+                height: 30,
+                align: "left",
+                fontSize: 16,
+                fontWeight: "600",
+                fontFamily: "sans-serif",
+                padding: [2, 50, 3, 40],
+                lineHeight: 30,
+                backgroundColor: {
+                  image: require("@/assets/img/show-god.png"),
+                },
+                formatter(e) {
+                  return `${e.data.count}`;
+                },
+              },
+              itemStyle: {
+                color: "rgba(0,0,0,0)",
+                opacity: 1,
+              },
+            });
+            this.myChart.setOption(this.options);
+            levelFlag = "1";
+          } else {
+            this.myChart.setOption(this.options);
+            if (this.dataArr && this.dataArr.length) {
+              levelFlag = this.dataArr[0].lev;
+              this.renderItems();
+              let throttledRenderEachCity = this.throttle(this.renderItems, 0);
+              this.myChart.on("geoRoam", throttledRenderEachCity);
+            }
+          }
+
+          this.myChart.on("click", async (param) => {
+            if (param.componentType !== "geo" || levelFlag === "3") return;
+            // this.loading = true;
+            for (let i = 0; i < this.provinces.length; i++) {
+              if (this.provinces[i].name.indexOf(param.name) != -1) {
+                let res = await this.getMapData(this.provinces[i].key);
+                if (
+                  res.code === 200 &&
+                  res.success &&
+                  res.data &&
+                  res.data.rows &&
+                  res.data.rows.length
+                ) {
+                  let e = this.provinces[i].key;
+                  if (e === "china") {
+                    this.showBack = false;
+                  } else {
+                    this.showBack = true;
+                  }
+                  this.log.push(e);
+                  this.fileName = e;
+                  this.getDataArr(res.data.rows);
+                  this.drawEcharts();
+                } else {
+                  this.$message.error("该区域没有数据，不支持地图下钻！");
+                  this.loading = false;
+                }
+                break;
+              }
+            }
+          });
+        }
+      });
+    },
+    async goBack() {
+      this.loading = true;
+      if (this.log && this.log.length) {
+        this.log.pop();
+        this.fileName = this.log[this.log.length - 1];
+      } else {
+        this.fileName = "china";
+        this.log = ["china"];
+      }
+
+      let res = await this.getMapData(
+        this.fileName === "china" ? "" : this.fileName
+      );
+      if (
+        res.code === 200 &&
+        res.success &&
+        res.data &&
+        res.data.rows &&
+        res.data.rows.length
+      ) {
+        let datas = res.data.rows;
+        this.getDataArr(datas);
+
+        if (this.fileName === "china") {
+          this.showBack = false;
+        } else {
+          this.showBack = true;
+        }
+        this.drawEcharts();
+      }
+    },
+    renderItems() {
+      this.legendData = [];
+      let tempOption = {
+        xAxis: [],
+        yAxis: [],
+        grid: [],
+        series: [],
+        tooltip: {
+          trigger: "item",
+          formatter: "{a} <br/>{b} : {c}头",
+          axisPointer: {
+            type: "none",
+          },
+          backgroundColor: "#FFFFFF",
+          padding: [12, 8],
+          extraCssText:
+            "box-shadow: 0px 8px 24px -8px rgba(0,0,0,0.08), 0px 16px 24px 0px rgba(0,0,0,0.08), 0px 8px 24px 0px rgba(0,0,0,0.08);",
+          textStyle: {
+            color: "#242424",
+            fontSize: 12,
+          },
+        },
+        legend: {
+          orient: "vertical",
+          left: 0,
+          bottom: 20,
+          itemWidth: 10,
+          itemHeight: 10,
+          itemGap: 15,
+          textStyle: {
+            fontSize: 12,
+            color: "#FFFFFF",
+            fontFamily: "Microsoft YaHei",
+          },
+          data: [],
+        },
+      };
+      this.dataArr.forEach((itemArr, itemIndex) => {
+        this.legendData.push(itemArr.name);
+        let coord = this.myChart.convertToPixel("geo", itemArr.value);
+        if (coord && coord.length) {
+          tempOption.xAxis.push({
+            id: itemIndex + itemArr.name,
+            gridId: itemIndex + itemArr.name,
+            type: "category",
+            nameLocation: "middle",
+            nameGap: 3,
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            z: 4,
+          });
+
+          tempOption.yAxis.push({
+            id: itemIndex + itemArr.name,
+            gridId: itemIndex + itemArr.name,
+            type: "value",
+            splitLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+              lineStyle: {
+                color: "red",
+              },
+            },
+            min: 0,
+            max: "dataMax",
+          });
+
+          tempOption.grid.push({
+            id: itemIndex + itemArr.name,
+            width: 40,
+            height: 30,
+            left: coord[0] - 15,
+            top: coord[1] - 15,
+            z: 4,
+          });
+
+          tempOption.series.push({
+            name: itemArr.name,
+            id: itemIndex + itemArr.name,
+            type: "bar",
+            xAxisId: itemIndex + itemArr.name,
+            yAxisId: itemIndex + itemArr.name,
+            data: [
+              {
+                name: "一级工作犬",
+                value: itemArr.dognum1,
+                itemStyle: {
+                  color: this.colorDatas[0],
+                },
+                label: this.barLabel,
+              },
+              {
+                name: "二级工作犬",
+                value: itemArr.dognum2,
+                itemStyle: {
+                  color: this.colorDatas[1],
+                },
+                label: this.barLabel,
+              },
+              {
+                name: "三级工作犬",
+                value: itemArr.dognum3,
+                itemStyle: {
+                  color: this.colorDatas[2],
+                },
+                label: this.barLabel,
+              },
+              {
+                name: "普通工作犬",
+                value: itemArr.dognum4,
+                itemStyle: {
+                  color: this.colorDatas[3],
+                },
+                label: this.barLabel,
+              },
+            ],
+            barWidth: 6,
+            z: 4,
+          });
+        }
+      });
+      tempOption.legend.data = this.legendData;
+      this.options = Object.assign(this.options, tempOption);
+      this.myChart.setOption(this.options);
+    },
+    // 缩放和拖拽
+    throttle(fn, delay, debounce) {
+      let currCall;
+      let lastCall = 0;
+      let lastExec = 0;
+      let timer = null;
+      let diff;
+      let scope;
+      let args;
+      delay = delay || 0;
+      function exec() {
+        lastExec = new Date().getTime();
+        timer = null;
+        fn.apply(scope, args || []);
+      }
+
+      let cb = function () {
+        currCall = new Date().getTime();
+        scope = this;
+        args = arguments;
+        diff = currCall - (debounce ? lastCall : lastExec) - delay;
+
+        clearTimeout(timer);
+
+        if (debounce) {
+          timer = setTimeout(exec, delay);
+        } else {
+          if (diff >= 0) {
+            exec();
+          } else {
+            timer = setTimeout(exec, -diff);
+          }
+        }
+
+        lastCall = currCall;
+      };
+
+      return cb;
+    },
+
+    async getDatas() {
+      let res = await this.getMapData();
+      if (
+        res.code === 200 &&
+        res.success &&
+        res.data &&
+        res.data.rows &&
+        res.data.rows.length
+      ) {
+        let datas = res.data.rows;
+        this.getDataArr(datas);
+        this.drawEcharts();
+      }
+    },
+    getDataArr(datas) {
+      this.dataArr = datas.map((item) => {
+        if (item.dognum != 0) {
+          return {
+            name: item.dwName,
+            value: [parseFloat(item.jd), parseFloat(item.wd)],
+            count: item.dognum,
+            dognum1: item.dognum1,
+            dognum2: item.dognum2,
+            dognum3: item.dognum3,
+            dognum4: item.dognum4,
+            lev: item.lev,
+          };
+        }
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.back {
+  position: absolute;
+  top: 20px;
+  right: 0;
+  color: #fff;
+  font-size: 16px;
+  z-index: 999;
+  cursor: pointer;
+}
+</style>