vue echarts下专地图配置

<template>

  <div id="maps"></div>

</template>

 

<script>

import { mapGetters } from "vuex";

import * as echarts from "echarts";

import { getMapAreaData } from "@/api/center/dashboard";

export default {

  components: {},

  name: "APP",

  data() {

    return {

      arr: [

        // 隐藏南海诸岛

        {

          name: "南海诸岛",

          itemStyle: {

            normal: {

              opacity: 0, // 为 0 时不绘制该图形

            },

          },

        },

      ],

      myChart: null,

      areasMapData: {},

      globalData: {} /** 当前使用地图名字 */,

      currentMapName: "china", // 中国地图json

      chinaMap: require("../../../assets/map/china.json"), // currentMapName: "map", // 黑龙江json // chinaMap: require("../../../assets/map/heilongjiang.json"),

      adcodeToName: [

        ["110000", { name: "北京", map: "110000" }],

        ["120000", { name: "天津", map: "tianjin" }],

        ["130000", { name: "河北", map: "hebei" }],

        ["140000", { name: "山西", map: "shanxi" }],

        ["150000", { name: "内蒙古", map: "neimenggu" }],

        ["210000", { name: "辽宁", map: "liaoning" }],

        ["220000", { name: "吉林", map: "jilin" }],

        ["230000", { name: "黑龙江", map: "heilongjiang" }],

        ["310000", { name: "上海", map: "310000" }],

        ["320000", { name: "江苏", map: "jiangsu" }],

        ["330000", { name: "浙江", map: "zhejiang" }],

        ["340000", { name: "安徽", map: "anhui" }],

        ["350000", { name: "福建", map: "fujian" }],

        ["360000", { name: "江西", map: "jiangxi" }],

        ["370000", { name: "山东", map: "shandong" }],

        ["410000", { name: "河南", map: "henan" }],

        ["420000", { name: "湖北", map: "hubei" }],

        ["430000", { name: "湖南", map: "hunan" }],

        ["440000", { name: "广东", map: "guangdong" }],

        ["450000", { name: "广西", map: "guangxi" }],

        ["460000", { name: "海南", map: "hainan" }],

        ["500000", { name: "重庆", map: "chongqing" }],

        ["510000", { name: "四川", map: "sichuan" }],

        ["520000", { name: "贵州", map: "guizhou" }],

        ["530000", { name: "云南", map: "yunnan" }],

        ["540000", { name: "西藏", map: "xizang" }],

        ["610000", { name: "陕西", map: "shanxis" }],

        ["620000", { name: "甘肃", map: "gansu" }],

        ["630000", { name: "青海", map: "qinghai" }],

        ["640000", { name: "宁夏", map: "ningxia" }],

        ["650000", { name: "新疆", map: "xinjiang" }],

        ["710000", { name: "台湾", map: "taiwan" }],

        ["810000", { name: "香港", map: "xianggang" }],

        ["820000", { name: "澳门", map: "aomen" }],

      ], // 弹窗背景图片

      pop_bg: require("@/assets/center/center_pop_bg.png"), // 定位图片

      localImgBase64:

        "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADYAAAAqCAMAAADPj" +

        "1gPAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8" +

        "AAACglBMVEUAAAD8Pz/0ul30ul30ul30ul30ul30ul30ul30ul30ul30ul30ul30ul30ul30ulz0u1z0ulz0" +

        "u1z0vlb0vVn0vlb0vlb0vFn0vlf1wlD1wVD1wlD1xkn1xkn1xUn2yUL2y0D2yUL2yz/2ykH2ykL2zTv2zjr2z" +

        "Tz2zTv2zTv2zTz2zjr2zjv30Tb30jP3xTD4ri730jL30TX4ti34ti330y331Sz31Cv31C34ti34ti34ti34ti34x" +

        "ir42SX4zSn4ti34ti34ti34tC340yP41yH4ti34ti34ti34sy34tC741h743Rr4si74sS/51xj53xT4ri/5rDD52RT5" +

        "4g75rDD4rTD51hT64Qv4rjD5rDD4ti34sS/4sS74si74sS/5rzD5rzD61BT63gz5rjH4sS/4sS/4sS74ry/4ti34sy74" +

        "sy74sy74sDD5rTH5rDH60xX5rTH4si74sy74sy74sy74tC74tS74tC75qzL5qjL60RX5qjL4tC74ti34tS34tS75qTP5" +

        "qDP60Bb5rDH4tS34sy34tC34tS35qTP5rDL4si/4tC74sy75rjD4tC34tS35rjH5rDL4tS35rDH4ti34tS34sS/5rTH5qz" +

        "L5qDP5qjL5qTL4sC/4sy74tC75rjD4tC74sC/4sS74sS75qzH4ry/5rS/5qzD5rDD5rTD5rTD5rTH5rDH5rTH5rDH5rDD5rD" +

        "D4rS/4sC/5qzD5qDD5pzH5pjH5pDH5pTH5qTD4sS75qTD4ry/4tS34tS34sy34rC74sy34rC74sC30ul30vlf1wlD1xkn2ykL2" +

        "zjv30jT31iz42iX43R/54hf55RD56Qn67QL67gD4ti3///9U7ltFAAAAxXRSTlMAABBQgGAgn79Aj8/frzBwUL9gjyBQgBC/v8" +

        "/fv8/fjyCAEO+/YJ+A3++PgIAgoBkMgDADC6ryyscIFiMrRvJgGBMmLHuWBRsoLCx8sC0tfLEuL36xNkSWwkg6EDBIXWRmZ6G9" +

        "Z2VdTDQNSF9jZmhqomlkYkswL1dia2ykazYgV2FubqVpWi9AYW2AwNvJkkdQiWpUf/Yrt4lqb21tZSxHZzAxRVpqLS83QUxaWl" +

        "5hW0xFLi0wMTIyMzMwLTEuGyEpAwsMBpqa3H4AAAABYktHRNV+vDsTAAADVElEQVRIx5WU91/TQBTAg1bALe6991bqoD2Vtkp7" +

        "0aLgnkm1qChNLFWhsYJgHUXcigoaUaB1j0oVxYFo3Rv/ID+XXMvZUlO/PyR5n3vfz7u8Sx5FtU279iqVStUhkfofEpOCmOSO8V" +

        "uqIEGneK2k4F8kx2d1CkaQFI/VMRhF+zi05FBy586hpy5xNBGndk2kqMSuOOimqHXHFtUjJaVnqDsqRa3XO4nefdC1bz856q+oD" +

        "XiPGCjfB+FwgKI2+ANiiHwfisPBitqwjxLDR6DrsJGjpGi0ojbmk8RYatz4CROpSXI0WVGb8llm6rTp06fNwMFMJStVPeuLzOw5c" +

        "2bjx7nq1H85aRotAPPmf41kAQDa9LQYdXR6AAAwGBZ+i2CRwYBW9JqMKCnDaAISENKLv//FEhpCg7xojBA1WAIGSJszl/4gWJZppi" +

        "HEyyCdeMs0LSCtrOzlP8OsyM5CniGUoQ+/Y1qoFACQpjOzsleuWv0Ls2btOtkLp5jWR1mo2IaNmxjWsrlFYouVzdm6bTtZDoBcqYOt" +

        "FurHjp15jM3C8buQtYu3W1km37F7D1EOmFBjjIDQ9hYUOvJzWI53CvtaWvYJLp6z2Jg8R8F+slwRRaUCUis+4MhjbFa7UygpPXiwt" +

        "ERwuTmWyXMcOHSYKAcyqFwiMhw5ijSWc7s8ZcfKy4+fKBF4js3JdxQePUlqOkpDFjuFNV4o+y1xWjjDWSTtLKlpYmnnzoc1ti2N3GQ" +

        "F3qTV7RLKLpSXH7voibVJsv+oJYUOxmaxXxI8pZWVlSWC022VWlIc0RIqndQO4wNwO4Uqj+dylZPnLFcYR2HBXljRmmZEx60nj1u8" +

        "io67muOdTkFwOXl7Ncvk79xxDUYeN/lxVUDafL2mNsdWzdn5uro6O1fNXqmtuU7+AwCooz9lKJq9vhs3b92+c5fj7t2//eDhDZ//" +

        "kUi37tGUG/5HtUQ50ez31QceP2loaGh4+jjwzOf3ksW05HDQmcLlaLHR6/fVPw8EAoHn9fXIEmGomEkTMUnw/12BPLPX6/dJ+F94G8VW" +

        "yxg9TVLXa7EHRdHc6JVoNCNJtvS6GGMvQ1cke1AMA2WrSBNj4GHUupevmiBB06uXOrXiMEckJLxufiPR/" +

        "DYhoa2MP7wKdaO/59/5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAABJRU5ErkJggg==",

    };

  },

  mounted() {

    this.getInfo();

    this.initChart();

  },

  methods: {

    getInfo() {

      var that = this;

      getMapAreaData("2297b32d-c77a-4bc4-aa1b-898a6d6215ea").then(

        (response) => {

          console.log("模拟数据2", response.result); // 大区得数据   subArea

          that.areasMapData = response.result.subArea; // 背景  bgArea

          that.globalData = response.result.bgArea;

          that.configerMapData(that.areasMapData);

        },

        (response) => {

          console.log("error");

        }

      );

    },

    configerMapData(dataArr) {

      this.chinaMap.features.map((i) => {

        dataArr.map((ele) => {

          ele.areas.map((item) => {

            if (i.properties.adcode == item) {

              // 高亮区域

              this.arr.push({

                name: i.properties.name,

                value: 1,

                itemStyle: {

                  emphasis: {

                    // 高亮区域鼠标划入颜色

                    areaColor: "#090",

                  },

                  normal: {

                    // 高亮区域颜色

                    areaColor: "#2489c6",

                  },

                }, // 高亮区域字体设置

                label: {

                  emphasis: {

                    color: "#fff",

                  },

                  normal: {

                    color: "#fff",

                    show: true,

                  },

                },

                areas: ele.areas,

              });

            }

          });

        });

      });

      this.drawChart();

    },

    drawChart() {

      // this.chinaMap   （全国）地图json数据

      // echarts     echarts引入名称

      this.myChart = echarts.init(document.getElementById("maps"));

      echarts.registerMap(this.currentMapName, this.chinaMap);

      var optionMap = {

        // 点击（划入）显示的名称

        tooltip: {

          // 是否显示

          padding: -2,

          // 弹窗显示位置

          position: "top",

          borderWidth: 0,

          // 鼠标是否可进入提示框浮层中

          enterable: true,

          // 背景颜色设置（透明）

          backgroundColor: "",

          show: true, // 划入 // trigger: "item", // 点击

          triggerOn: "click", // 自定义

          formatter: function (params, ticket, callback) {

            console.log("params", params);

            if (params.componentSubType == "map") {

              // 点击地图（省份）

            } else {

              // 点击坐标点）

              return (

                `

        <div style="background-image: url(${require("@/assets/center/center_pop_bg.png")});background-size:100%;width: 305px;pointer-events: all;

          height: 190px;

          display: flex;

          flex-direction: column;

          justify-content: space-around;">

 

         <div class="title-container">

          <span style="color: #48e6ff;

             font-size: 18px;

             font-weight: bold;

             position: relative;

             top: 0px;

             left: 10px;">` +

                1111 +

                `</span>

         </div>

 

         <div style="display: flex;

            flex-direction: row;

            justify-content: space-around;

            margin-left: 5px;

            margin-right: 5px;">

 

          <div style="display: flex;

            flex-direction: column;

            justify-content: space-evenly;">

           <div style="padding-top: 8px;

                padding-bottom: 8px;">

            <span style="font-size: 15px;

                color: #b9bbc6;">下级中心:</span>

            <span class="SecondCenter" id="SecondCenter" style="text-decoration: underline; color: #43daf3; font-weight: 800;pointer:cursor;" >` +

                2222 +

                `</span>

           </div>

           <div style="padding-top: 8px;

                padding-bottom: 8px;">

            <span style="font-size: 15px;

                color: #b9bbc6;">管理面积:</span>

            <span style="color: #43daf3; font-weight: 800">` +

                3333 +

                `</span>

           </div>

           <div style="padding-top: 8px;

                padding-bottom: 8px;">

            <span style="font-size: 15px;

                color: #b9bbc6;">今日警情:</span>

            <span class="TodayAlarm" id="TodayAlarm" style="color: #43daf3; font-weight: 800">` +

                4444 +

                `</span>

           </div>

          </div>

          <div class="right-infor-container">

           <div style="padding-top: 8px;

                padding-bottom: 8px;">

            <span style="font-size: 15px;

                color: #b9bbc6;">单位总数:</span>

            <span  class="EnterpriseTotal" id="EnterpriseTotal" style="text-decoration: underline;color: #43daf3; font-weight: 800">` +

                3333 +

                `</span>

           </div>

           <div style="padding-top: 8px;

                padding-bottom: 8px;">

            <span style="font-size: 15px;

                color: #b9bbc6;">设备总数:</span>

            <span class="EquipTotal" id="EquipTotal" style="text-decoration: underline;color: #43daf3; font-weight: 800">` +

                222 +

                `</span>

           </div>

           <div style="padding-top: 8px;

                padding-bottom: 8px;">

            <span style="font-size: 15px;

                color: #b9bbc6;">微型消防站:</span>

            <span style="color: #43daf3; font-weight: 800">` +

                111 +

                `</span>

           </div>

          </div>

         </div>

 

        </div>

        `

              );

            }

          },

        }, // 地图背景颜色 // backgroundColor: "#0ff", // 地图标题 // title: { //  text: "全国地图大数据", // }, // 地图映射名称 // nameMap: { //  香港特别行政区: "香港", //  澳门特别行政区: "澳门", //  上海市: "上海", //  北京市: "北京", //  天津市: "天津", // }, //左侧小导航图标 // visualMap: { //  show: true, //  x: "left", //  y: "center", // }, // 地图（本项目是用来显示坐标点）

        geo: {

          map: this.currentMapName, // 地图样式

          left: "5%",

          right: "5%",

          top: "5%",

          bottom: "5%", // 隐藏南海诸岛

          regions: [

            {

              name: "南海诸岛",

              itemStyle: {

                // 隐藏地图

                normal: {

                  opacity: 0, // 为 0 时不绘制该图形

                },

              },

            },

          ],

        }, //配置属性

        series: [

          {

            // 地图边距

            left: "5%",

            top: "5%",

            right: "5%",

            bottom: "5%",

            name: "数据",

            type: "map", // 值为china是全国地图，值为map是区域地图

            map: this.currentMapName, // 去掉地图点击后（省份）的样式（全局）

            selectedMode: false, // 鼠标是否可以拖动地图 // roam: true, // 各省份名称（全局）

            label: {

              normal: {

                color: "rgba(79, 83, 84, 1.0)",

                show: false,

              }, // 省份名称鼠标划入字体颜色（全局）

              emphasis: {

                show: false,

                color: "rgba(79, 83, 84, 1.0)",

              },

            },

            itemStyle: {

              // 地图全局背景颜色（全局）

              areaColor: "rgba(79, 83, 84, 1.0)", // 鼠标划入（全局）

              emphasis: {

                show: false, // 省份鼠标划入背景颜色（全局）

                areaColor: "rgba(79, 83, 84, 1.0)", // 阴影设置 // shadowOffsetX: 0, // shadowOffsetY: 0, // shadowBlur: 20, // borderWidth: 0, // shadowColor: "rgba(255, 0, 0, 1)",

              },

            }, // 高量省份数据

            data: this.arr,

          },

          {

            //  指明图表类型：带涟漪效果的散点图

            type: "effectScatter", //  指明绘制在geo坐标系上

            coordinateSystem: "geo",

            showEffectOn: "emphasis", //  this.localImgBase64

            symbol: this.localImgBase64, // 定位图片大小

            symbolSize: [45, 40], // 定位图片上面的文字设置

            label: {

              normal: {

                show: true,

                color: "rgba(248, 182, 45, 1.000)",

                lineHeight: 20,

                position: "top",

                distance: 5,

                fontStyle: "normal",

                fontWeight: "bold",

                fontSize: 16,

                backgroundColor: "rgba(248, 182, 45, 0.3)",

                borderColor: "rgba(248, 182, 45, 1.000)",

                borderWidth: 1,

                borderRadius: [2, 2, 2, 2],

                padding: [5, 6, 5, 6],

                formatter: function (params) {

                  return params.data.name;

                },

              },

            }, // 不生效（没用） // tooltip: { //  show: true, //  trigger: "item", //  // triggerOn: "click", //  position: "top", //  padding: -2, //  borderWidth: 0, //  enterable: true, //  backgroundColor: "", //  formatter: function (params, ticket, callback) { //   console.log("params----------------------", params); //  }, // }, // 定位名称和坐标点

            data: [

              {

                name: "华北大区",

                value: [124, 45],

              },

            ],

          },

        ],

      }; //使用制定的配置项和数据显示图表

    // 清楚地图数据

    this.myChart.clear();     

    this.myChart.setOption(optionMap);

    } /** 初始化地图 地图事件绑定 */,

    initChart() {

      var that = this; // 获取id并初始化

      this.myChart = echarts.init(

        document.getElementById("maps")

      ); /** 处理地图点击省份事件 */

      this.myChart.on("click", function (parames) {

        if (parames.componentType === "series") {

          if (parames.seriesType === "map") {

            if (

              parames.data &&

              parames.data.areas &&

              parames.data.areas.length

            ) {

              let newArr = [];

              parames.data.areas.map((item, index) => {

                that.adcodeToName.map((ele) => {

                  if (ele[0] == item) {

                    // 获取每个省的json数据

                    let arr = require("@/assets/map/" + ele[1].map + ".json");

                    newArr.push(arr.features);

                  }

                });

                that.chinaMap = {

                  type: "FeatureCollection", // 多个省份数据连接

                  features: [].concat(...newArr),

                };

                this.currentMapName = "map"; // 重新加载地图（大区级）

                that.drawChart();

              });

            }

          }

        }

        return;

      }); /** 处理鼠标移入目标元素事件 */

      this.myChart.on("mouseover", function (parames) {

        if (parames.componentType === "series") {

          if (parames.seriesType === "effectScatter") {

          } else if (parames.seriesType === "map") {

            // 鼠标移入高亮省份的高亮设置（高亮--highlight）

            that.highlightColor("highlight", parames);

          }

        }

      }); // /** 处理鼠标移出目标元素事件 */

      this.myChart.on("mouseout", function (parames) {

        if (parames.componentType === "series") {

          if (parames.seriesType === "effectScatter") {

          } else if (parames.seriesType === "map") {

            // 鼠标移出高亮省份的高亮设置（去掉高亮--downplay)

            that.highlightColor("downplay", parames);

          }

        }

      }); /** 点击地图以外的事件 */

      this.myChart.getZr().on("click", function (event) {

        // 该监听器正在监听一个`zrender 事件`。

        if (!event.target) {

          that.currentMapName = "china";

          that.chinaMap = require("../../../assets/map/china.json"); //  重新加载地图（全国级）

          that.getInfo();

        } else {

          that.currentMapName = "map";

        }

      });

    } /** 联动高亮显示省份map */,

    highlightColor(type, parames) {

      let that = this;

      if (parames.data && parames.data.areas && parames.data.areas.length) {

        parames.data.areas.forEach(function (item, index) {

          that.chinaMap.features.map((i) => {

            if (i.properties.adcode == item) {

              that.myChart.dispatchAction({

                type: type,

                name: i.properties.name,

              });

            }

          });

        });

      }

    },

  },

  computed: {

    ...mapGetters(["eventData", "eid"]),

  },

};

</script>

 

<style lang="scss">

#maps {

  width: 100%;

  height: 100%;

}

</style>