echarts地图在vue项目中的使用（通用版）

在echarts社区中下载对应地图的JSON文件，然后替换我代码中的JSON文件即可，其他的不用动

<template>
  <div class="baojimap" ref="baojimap" id="baojimap"></div>
</template>

<script>
import * as echarts from "echarts";
import baoji from "@/components/cmap/china.json";

export default {
  mounted () {
    //调用
    this.drawLine8();
    window.onresize = function () {
      if (this.statusChart) {
        this.statusChart.resize();
      }
    };
  },
  beforeDestroy () {
    // console.log("销毁");
    this.statusChart && this.statusChart.dispose();
    // window.removeEventListener("resize", this.changeSize);
  },
  methods: {
    // 自适应宽高
    changeSize () {
      this.statusChart.resize();
    },
    drawLine8 () {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("baojimap"));
   
      echarts.registerMap("baoji", baoji);
      myChart.off("click");
      // 绘制图表
      var data = [];
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: "item",
        },
        legend: {
          show: false,
        },
        series: [
          {
//提示信息，可以根据需求自定义或删除
            tooltip: {
              trigger: "item",
              formatter: function (item) {
                var tipHtml = "";
                tipHtml =
                  '<div style="width:180px;height:112px;background:#fff;border-radius:4px;font-size:16px;font-weight:500;padding:0px;">' +
                  '<div style="font-size:14px;font-weight:700;line-height:20px;color:#39498E;text-align:left;margin-bottom:4px;">' +
                  item.name +
                  "</div>" +
                  '<div style="display:flex;justify-content: space-between;color:#494949;margin-bottom:4px">' +
                  '<span style="font-size:12px;color:#666;font-weight:400;">' +
                  "项目总数" +
                  " " +
                  "</span>" +
                  '<span style="font-size:12px;color:#666;font-weight:400;">' +
                  '976' +
                  " 个" +
                  "</span>" +
                  "</div>" +
                  '<div style="display:flex;justify-content: space-between;color:#494949;margin-bottom:4px">' +
                  '<span style="font-size:12px;color:#666;font-weight:400;">' +
                  "风险数量" +
                  " " +
                  "</span>" +
                  '<span style="font-size:12px;color:#666;font-weight:400;">' +
                  "976" +
                  " 个" +
                  "</span>" +
                  "</div>" +
                  '<div style="display:flex;justify-content: space-between;color:#494949;margin-bottom:4px">' +
                  '<span style="font-size:12px;color:#666;font-weight:400;">' +
                  "涉及风险金额" +
                  " " +
                  "</span>" +
                  '<span style="font-size:12px;color:#666;font-weight:400;">' +
                  "976" +
                  " 亿元" +
                  "</span>" +
                  "</div>" +
                  '<div style="display:flex;justify-content: space-between;color:#494949;margin-bottom:4px">' +
                  '<span style="font-size:12px;color:#666;font-weight:400;">' +
                  "风险率" +
                  " " +
                  "</span>" +
                  '<span style="font-size:12px;color:#666;font-weight:400;">' +
                  "76" +
                  " %" +
                  "</span>" +
                  "</div>" +
                  "</div>";
                return tipHtml;
              },
            },
            name: "中国",
            type: "map",
            map: "baoji", // 自定义扩展图表类型
            aspectScale: 1, //视角倾斜度
            zoom: 1, //缩放
            showLegendSymbol: false,
            label: {
              // 默认的字体样式
              show: true,
              color: "#fff",
              fontSize: 12,
            },
            itemStyle: {
              // 默认的区域块颜色和样式

              areaColor: "#2888e1", // 地图颜色
              borderColor: "#0639a9", // 边界颜色
              borderWidth: 2,
              shadowColor: "#0E95F1",
              shadowBlur: 10,
            },
            shading: 'realistic',
            // 真实感材质相关配置 shading: 'realistic'时有效
            realisticMaterial: {
              detailTexture: '#fff', // 纹理贴图
              textureTiling: 3, // 纹理平铺，1是拉伸，数字表示纹理平铺次数
              roughness: 0, // 材质粗糙度，0完全光滑，1完全粗糙
              metalness: 1, // 0材质是非金属 ，1金属
              roughnessAdjust: 0
            },
            emphasis: {
              label: {
                // 悬浮高亮时的字体样式
                show: true,
                color: "#fff",
                fontSize: 12,
                fontWeight: 700,
              },
              itemStyle: {
                // 悬浮高亮时的地图背景色和边框颜色
                areaColor: "#119aff",
                borderColor: "#fff",
                borderWidth: 2,
              },
            },
            layoutCenter: ["50%", "50%"],
            layoutSize: "160%",
            markPoint: {
              symbol: "none",
            },
            data: data,
          },
        ],
      });
    },
  },
};
</script>

<style>
.baojimap {
  height: 100%;
  width: 100%;
}
</style>