echarts 3d地图-成都

<template>
  <div class="right_main_under"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading"
       element-loading-background="rgba(0, 0, 0, 0.8)">
    <!-- //中间地图 -->
    <div class="centermap">
      <div class="Mapcenter1">
        <el-button type="primary"
                   size="mini"
                   v-if="oldmaploading"
                   @click="fanhui"
                   class="btn"><span class="el-icon-back"></span>返回上一级</el-button>
        <div id="myEcharts"
             ref="chartmap"
             style="width: 1200px; height: 600px"></div>
      </div>
    </div>
  </div>
</template>

<script >
import chengdou from "@/static/jsonmap/chengdou";
import chenghua from "@/static/jsonmap/chenghua";
import chongzhou from "@/static/jsonmap/chongzhou";
import dayi from "@/static/jsonmap/dayi";
import doujiangyan from "@/static/jsonmap/doujiangyan";
import jianyang from "@/static/jsonmap/jianyang";
import jinjiang from "@/static/jsonmap/jinjiang";
import jinniu from "@/static/jsonmap/jinniu";
import jintang from "@/static/jsonmap/jintang";
import longquanyi from "@/static/jsonmap/longquanyi";
import pengzhou from "@/static/jsonmap/pengzhou";
import pidou from "@/static/jsonmap/pidou";
import pujiang from "@/static/jsonmap/pujiang";
import qingbaijiang from "@/static/jsonmap/qingbaijiang";
import qingyang from "@/static/jsonmap/qingyang";
import qionglai from "@/static/jsonmap/qionglai";
import shuangliu from "@/static/jsonmap/shuangliu";
import wenjiang from "@/static/jsonmap/wenjiang";
import wuhou from "@/static/jsonmap/wuhou";
import xindou from "@/static/jsonmap/xindou";
import xinjin from "@/static/jsonmap/xinjin";
import dayjs from "dayjs";


export default {
  data () {
    return {
      mapName1: "",
      totalPages1: "",
      gridData: [],
      mypageable1: {
        pageNum1: 1,
        pageSize1: 10,
      },
      total1: 1,
      dialogTableVisible: false,
      loading: false,
      loading1: false,
      oldmaploading: false,
      cityName: "成都市",
      jxmap: {
        成都市: chengdou,
        锦江区: jinjiang,
        青羊区: qingyang,
        金牛区: jinniu,
        武侯区: wuhou,
        成华区: chenghua,
        龙泉驿区: longquanyi,
        青白江区: qingbaijiang,
        新都区: xindou,
        温江区: wenjiang,
        双流区: shuangliu,
        郫都区: pidou,
        金堂县: jintang,
        大邑县: dayi,
        蒲江县: pujiang,
        新津区: xinjin,
        都江堰市: doujiangyan,
        彭州市: pengzhou,
        邛崃市: qionglai,
        崇州市: chongzhou,
        简阳市: jianyang,
      },
      newdomainSimpleVo: {
        dateValue_find1: "",
      },
      whiteSearchList1: {
        startCreateTime1: dayjs()
          .subtract(1, "month")
          .format("YYYY-MM-DD HH:mm:ss"),
        endCreateTime1: dayjs().format("YYYY-MM-DD HH:mm:ss"),
      },
      leftarrX: [],
      leftarrY: [],
      //左侧柱状
      visits: [],
      sourceip: [],
      //右侧柱状
      url: [],
      urlvisits: [],
      //下折线
      disDate: [],
      disvisits: [],
      mapName: "",
      dataDi: [],
      max: 0,
      min: 0,
      xinarr: [],
    };
  },
  mounted () { },
  created () {
    this.mapquan();
  },
  methods: {
    //统计全部地区地图显示
    async mapquan () {
      let discoverCountVo = {
        address: "",
        endTime: this.whiteSearchList1.endCreateTime1,
        startTime: this.whiteSearchList1.startCreateTime1,
      };
      const { data: res } = await this.$http.requests.get(
        "/discover/countAddressByDate"
      );
      // console.log(res,'地图');
      if (res.code == 200) {
        if (res.data.length > 0) {
          var newarr = res.data.map((item) => {
            return {
              name: item.address,
              value: item.visits,
            };
          });

          newarr.forEach((element) => {
            element.name = (element.name || "").split("成都市")[1];
          });
          this.xinarr = newarr;
          let max = newarr.sort((a, b) => {
            return b.value - a.value;
          });
          this.max = max[0] ? max[0]["value"] : 0;
          // console.log(this.max);
          this.dataDi = newarr;
          setTimeout(() => {
            this.mineMap();
          }, 500);
        } else {
          this.$message("地图访问量无数据");
          this.loading = false;
        }
      }
    },
    //中间地图
    mineMap () {
      var self = this;
      var mapChart = this.$echarts.init(document.getElementById("myEcharts"));
      // let dataDi = [
      // { name: "锦江区", value: 15 },
      // { name: "青羊区", value: 1000 },
      // { name: "金牛区", value: 20000 },
      // { name: "武侯区", value: 43562 },
      // { name: "成华区", value: 15896 },
      // { name: "龙泉驿区", value: 9756 },
      // { name: "青白江区", value: 1356 },
      // { name: "新都区", value: 25863 },
      // { name: "温江区", value: 1235 },
      // { name: "双流区", value: 5643 },
      // { name: "郫都区", value: 25863 },
      // { name: "金堂县", value: 1235 },
      // { name: "大邑县", value: 15 },
      // { name: "蒲江县", value: 1000 },
      // { name: "新津区", value: 20000 },
      // { name: "都江堰市", value: 43562 },
      // { name: "彭州市", value: 15896 },
      // { name: "邛崃市", value: 9756 },
      // { name: "崇州市", value: 1356 },
      // { name: "简阳市", value: 25863 },
      // ];
      let mapName = this.jxmap[this.cityName] + "";

      this.$echarts.registerMap(mapName, this.jxmap[this.cityName]);

      var mapOption = {
        geo: [
          {
            show: true,
            zoom: 1,
            map: mapName,
            // center:  [104.08, 30.69],
            silent: true,
            aspectScale: 0.75, //长宽比,默认0.75
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: "rgba(0,0,0,0)",
                borderColor: "rgba(80,210,252,0.5)",
                // areaColor: 'yellow',
                borderWidth: 3, //设置外层边框
                // borderColor: '#fff',
                // shadowColor: "red", //#A0A2A5 外边框阴影色
                // shadowBlur: 10, //外边框阴影
                opacity: 1,
              },
            },
            //  layoutCenter:["54.50%", "51%"],  //左下
            layoutCenter: ["52.50%", "51%"], //右下
            layoutSize: "100%",
          },
          {
            show: true,
            zoom: 1,
            map: mapName,
            // center: [104.08, 30.71] ,
            silent: true,
            aspectScale: 0.75, //长宽比,默认0.75
            label: {
              normal: {
                show: false,
              },
              emphasis: {
                show: false,
              },
            },
            roam: false,
            itemStyle: {
              normal: {
                areaColor: "rgba(0,0,0,0)",
                borderColor: "rgba(80,210,252,0.5)",
                // areaColor: 'yellow',
                borderWidth: 3, //设置外层边框
                // borderColor: '#fff',
                // shadowColor: "red", //#A0A2A5 外边框阴影色
                // shadowBlur: 10, //外边框阴影
                opacity: 1,
              },
            },
            // layoutCenter:["54%", "52%"],  //左下
            layoutCenter: ["53%", "52%"], //右下
            layoutSize: "100%",
          },
        ],

        tooltip: {
          trigger: "item",
          backgroundColor: "#fff",
          borderWidth: 1,
          // borderColor:",
          formatter: (params) => {
            return `
            <section style='width:100px;height:45px;color:#333333';>
              <div style='color:#333333;font-size: 12px;'>
                ${params.name}
              </div>
                 <div>
               <span style="font-size: 12px;color:#808080">${params.seriesName
              }:</span>
                <span style="font-size: 16px;color: #4298F3;">${isNaN(params.value) == true ? "0" : params.value
              }</span>
             </div>

            </section>`;
          },
        },
        //距离左右，上下距离的百分比

        visualMap: {
          padding: [0, 0, 0, 30],
          textStyle: {
            color: "white",
          },
          min: this.min,
          max: this.max,
          text: ["最高值", "最低值"],
          itemWidth: 15,
          itemHeight: 100,
          align: "auto",
          realtime: false,
          calculable: true,
          inRange: {
            color: ["#2B91B7", "#5DBADE", "#D84B61"],
          },
        },

        series: [
          {
            name: "访问量",
            type: "map",
            data: this.dataDi,
            // map: this.mapData1,
            map: mapName,
            // center: [104.080989, 30.657689],
            // center: [104.103077,30.660275],
            componentType: "geo",
            // symbolOffset: [0, "-50%"],
            roam: false,
            layoutSize: "100%", //大小
            layoutCenter: ["52%", "50%"],
            // data: this.dataDi,
            aspectScale: 0.75,
            zoom: 1,
            itemStyle: {
              normal: {
                borderColor: "#64E0FC",
                borderWidth: 3,
                areaColor: "#2B91B7",
                label: {
                  show: true,
                  color: "#fff",
                  formatter: function (data) {
                    var a = data.name;
                    // var b = data.value;
                    // return a + "\n" + b;
                    return a;
                  },
                },
              },
              emphasis: {
                areaColor: "#00669C",
                label: {
                  show: true,
                  color: "#fff",
                  formatter: function (data) {
                    var a = data.name;
                    // var b = data.value;
                    // return a + "\n" + b;
                    return a;
                  },
                },
              },
            },
          },
          // {
          //   name: '散点',
          //   type: 'scatter',
          //   coordinateSystem: 'geo',
          //   symbolOffset: [0, "-50%"],
          //   data: convertData(_this.mapData),
          //   symbolSize: (v) => {
          //     // if (v[3] === 0) {
          //     //   return [0, 0]
          //     // }
          //     // if (v[3] <= _this.max / 4) {
          //     //   return [20, 30]
          //     // } else if (v[3] <= _this.max / 4 * 2 && v[3] > _this.max / 4) {
          //     //   return [20, 60]
          //     // } else if (v[3] <= _this.max / 4 * 3 && v[3] > _this.max / 4 * 2) {
          //     //   return [20, 90]
          //     // } else {
          //     //   return [20, 120]
          //     // }
          //   },
          //   symbol: (pa) => {

          //     console.log(pa);
          //     // if (pa[3] < _this.max / 4) {
          //     //   return `image://${require('../../assets/img/lower.png')}`
          //     // } else if (pa[3] < _this.max / 4 * 2) {
          //     //   return `image://${require('../../assets/img/low.png')}`

          //     // } else if (pa[3] < _this.max / 4 * 3) {
          //     //   return `image://${require('../../assets/img/high.png')}`

          //     // } else {
          //     //   return `image://${require('../../assets/img/higher.png')}`
          //     // }
          //   }
          // }
        ],
      };
      this.loading = false;
      // console.log(mapOption);
      mapChart.setOption(mapOption);

      window.addEventListener("resize", function () {
        mapChart.resize();
      });
      mapChart.off("click");
      mapChart.on("click", function (params) {
        // console.log(params.name);
        let name = params.name;
        self.handlerChange(name);
      });

      //去除默认的鼠标事件
      document.oncontextmenu = function () {
        return false;
      };
      //新加上鼠标右击事件

      mapChart.on("contextmenu", function (params) {
        // console.log("我是右键");
        let name = params.name;
        self.one(name);
      });
    },
    handlerChange (name) {
      this.cityName = name;
      // console.log( this.cityName);
      this.mineMap();
      this.oldmaploading = true;
      this.mapName = name;
      // myChart.setOption(option);

      this.ipxuan();
    },
    one (name) {
      this.mapName1 = name;
      this.fangwenl();
    },
    //-=-==--=-=-=--=-=--=-=--=-=-==---=-=-=-=--=-=-=-=-=-=-=-=-=-=
    handleClose (done) {
      this.mypageable1.pageNum1 = 1;

      this.dialogTableVisible = false;
    },
    // 时间
    dataCreate_change1 (val) {
      if (val && val != "") {
        this.whiteSearchList1.startCreateTime1 = val[0];
        this.whiteSearchList1.endCreateTime1 = val[1];
      } else {
        this.whiteSearchList1.startCreateTime1 = dayjs()
          .subtract(1, "month")
          .format("YYYY-MM-DD HH:mm:ss");
        this.whiteSearchList1.endCreateTime1 = dayjs().format(
          "YYYY-MM-DD HH:mm:ss"
        );
      }
    },
    //返回
    fanhui () {
      this.cityName = "成都市";
      this.mineMap();
      this.oldmaploading = false;
      this.loading = true;
      this.leftip();
    },

    xuanze () {
      this.leftip1();
    },
    chongzhi () {
      this.newdomainSimpleVo.dateValue_find1 = null;
      this.whiteSearchList1.startCreateTime1 = dayjs()
        .subtract(1, "month")
        .format("YYYY-MM-DD HH:mm:ss");
      this.whiteSearchList1.endCreateTime1 = dayjs().format(
        "YYYY-MM-DD HH:mm:ss"
      );
      this.leftip();
      this.fanhui();
    },
    //访问量
    async fangwenl (val) {
      this.gridData = [];
      this.loading1 = true;
      this.dialogTableVisible = true;
      let list = {
        mypageable: {
          pageNum: this.mypageable1.pageNum1,
          pageSize: this.mypageable1.pageSize1,
        },
        address: "中国四川省成都市" + this.mapName1,
      };
      const { data: res } = await this.$http.post("/discover/getRawData", list);
      if (res.code == 200) {
        this.loading1 = false;
        this.gridData = res.data.content;
        this.total1 = res.data.totalElements;
        this.totalPages1 = res.data.totalPages;
      }
    },
    async handleCurrentChange1 (val) {
      this.gridData = [];
      this.loading1 = true;
      this.mypageable1.pageNum1 = val;

      // console.log( this.mypageable.pageNum);
      // this.fangwenl();
      let list = {
        mypageable: {
          pageNum: this.mypageable1.pageNum1,
          pageSize: this.mypageable1.pageSize1,
        },
        address: "中国四川省成都市" + this.mapName1,
      };
      const { data: res } = await this.$http.post("/discover/getRawData", list);
      if (res.code == 200) {
        this.loading1 = false;
        this.gridData = res.data.content;
        this.total1 = res.data.totalElements;
        this.totalPages1 = res.data.totalPages;
      }
    },
  },
};
</script>

<style  scoped>
.right_main_under {
  width: 100%;
  height: 100%;
  padding: 0;
  z-index: 999;
  box-sizing: border-box;
}
.Maptop {
  width: 100%;
  height: 5%;
}
.Mapcenter {
  width: 100%;
  height: 75%;
  padding: 10px 0;
  overflow: hidden;
  box-sizing: border-box;
}
.Mapbtom {
  width: 100%;
  height: 22%;
}
.leftmap {
  width: 24%;
  height: 100%;
  float: left;
}
.centermap {
  width: 50%;
  height: 100%;
  float: left;
}
.rightmap {
  width: 26%;
  height: 100%;
  float: left;
}
::v-deep .el-form-item__label {
  color: #fff;
}
.leftmapson {
  width: 100%;
  height: 100%;
}
.leftmapson1 {
  width: 100%;
  height: 100%;
}
.leftmapson2 {
  width: 100%;
  height: 100%;
}
.Mapcenter1 {
  position: relative;
  width: 100%;
  height: 100%;
}
.btn {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 2;
}
.dialogInfo ::v-deep .el-table__row {
  height: 40px !important;
  z-index: 666;
}
.right_main_under .pagePagination {
  margin-top: 0;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #03112359;
}
.el-table::before {
  height: 0px;
}
</style>