1.Echarts官方地圖資源

Echarts官方文檔已經(jīng)暫停了地圖數(shù)據(jù)的下載，但是百度Echarts給我們留了下載的官方接口：https://echarts.apache.org/examples/vendors/echarts/map/

(1)JSON格式

https://echarts.apache.org/examples/vendors/echarts/map/json/

(2)JS格式

https://echarts.apache.org/examples/vendors/echarts/map/js/

2.實(shí)現(xiàn)

(1)下載china.js文件

https://echarts.apache.org/examples/vendors/echarts/map/js/china.js

(2)放到對(duì)應(yīng)的文件(放在了utils里)

(3)上代碼

<template>
  <div class="managingPatientSize">
    <el-row>
      <el-col :span="6">1</el-col>
      <el-col :span="12">
        <div id="china-map"></div>
      </el-col>
      <el-col :span="6">1</el-col>
    </el-row>
  </div>
</template>
<script>
import "../utils/china.js";
// 引入 ECharts 主模塊
var echarts = require("echarts/lib/echarts");
// 引入柱狀圖
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
// 引入提示框和標(biāo)題組件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/chart/pie");
require("echarts/lib/component/markLine");
require("echarts/lib/component/geo");
require("echarts/lib/chart/scatter");
require("echarts/lib/chart/map");
export default {
  data() {
    return {};
  },
  mounted() {
    this.drawCharts();
  },
  methods: {
    drawCharts() {
      // 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
      var chinaMap = echarts.init(document.getElementById("china-map"));
      window.onresize = chinaMap.resize; // 窗口或框架被調(diào)整大小時(shí)執(zhí)行chinaMap.resize
      chinaMap.setOption({
        // 進(jìn)行相關(guān)配置
        tooltip: {}, // 鼠標(biāo)移到圖里面的浮動(dòng)提示框
        dataRange: {
          show: false,
          min: 0,
          max: 1000,
          text: ["High", "Low"],
          realtime: true,
          calculable: true,
          color: ["orangered", "#FF9B52", "#FFD068"],
        },
        geo: {
          // 這個(gè)是重點(diǎn)配置區(qū)
          map: "china", // 表示中國(guó)地圖
          roam: true,
          label: {
            normal: {
              show: true, // 是否顯示對(duì)應(yīng)地名
              textStyle: {
                color: "#fff",
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "#293171",
              borderWidth: "2",
              areaColor: "#0A0F33",
            },
            emphasis: {
              areaColor: null,
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo", // 對(duì)應(yīng)上方配置
          },
          {
            name: "啟動(dòng)次數(shù)", // 浮動(dòng)框的標(biāo)題
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "北京",
                value: 599,
              },
              {
                name: "上海",
                value: 142,
              },
              {
                name: "黑龍江",
                value: 44,
              },
              {
                name: "深圳",
                value: 92,
              },
              {
                name: "湖北",
                value: 810,
              },
              {
                name: "四川",
                value: 453,
              },
            ],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.managingPatientSize {
  height: 100%;
  color: #fff;
  .el-row {
    height: 100%;
    .el-col {
      height: 100%;
      position: relative;
      #china-map {
        height: 100%;
      }
    }
  }
}
</style>

(4)效果圖