1.安裝echarts.js 相關模塊
npm i echarts
2. 在 main.js 文件中搭建全局
// 引入echarts
import echarts from 'echarts'
Vue.prototype.$echarts = echarts
3.vue文件種引入相關文檔
import echarts from "echarts";
import "./china.js"; // 引入中國地圖數據
4.隔離相關文檔
在 node_modules 文件中查找到 eacharts 下的 map 文件 并隔離
4.搭建vue文件
<template><div class="g-home relative"><div id="map" ref="myEchart" @click="showChinaMap"></div></div>
</template><script>
import echarts from "echarts";
// import $ from "jquery"
import "./china.js"; // 引入中國地圖數據
import Provinces from "../../static/province/shanghai.json"; // 引入中國地圖數據
export default {data() {return {provinces: ["shanghai","hebei","shanxi","neimenggu","liaoning","jilin","heilongjiang","jiangsu","zhejiang","anhui","fujian","jiangxi","shandong","henan","hubei","hunan","guangdong","guangxi","hainan","sichuan","guizhou","yunnan","xizang","shanxi1","gansu","qinghai","ningxia","xinjiang","beijing","tianjin","chongqing","xianggang","aomen","taiwan",],provincesText: ["上海","河北","山西","內蒙古","遼寧","吉林","黑龍江","江蘇","浙江","安徽","福建","江西","山東","河南","湖北","湖南","廣東","廣西","海南","四川","貴州","云南","西藏","陜西","甘肅","青海","寧夏","新疆","北京","天津","重慶","香港","澳門","臺灣",],map: {},province: "", //記錄進入的省級地圖名稱};},mounted() {this.$nextTick(() => {//使用vue.$nextTick()方法可以dom數據更新后延遲執行this.initMap();});},methods: {//地圖參數配置getMapOpt(place) {let option = {// 進行相關配置title: {text: "全國范圍內進入城市險帶來的潛在理賠量",left: "center",top: 30,textStyle: { fontSize: 20 },},tooltip: {}, // 鼠標移到圖里面的浮動提示框dataRange: {show: false,min: 0,max: 1000,text: ["High", "Low"],realtime: true,calculable: true,color: ["#2846FF"],},geo: {// 這個是重點配置區map: place ? place : "china", // 表示中國地圖roam: true,label: {normal: {show: true, // 是否顯示對應地名textStyle: {color: "#fff",},},},// 移動時效果itemStyle: {normal: {color: "#EFF3FB", //地圖背景色borderColor: "#fff", //地圖邊界線顏色textStyle: {color: "#000", //字體色},},emphasis: {areaColor: "#87CEFA",shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "#fff",},},},series: [{type: "scatter",coordinateSystem: "geo", // 對應上方配置},{name: "客戶數量", // 浮動框的標題type: "map",geoIndex: 0,data: [{name: "上海",value: 100,},{name: "浦東新區",value: 100,},{name: "浙江",value: 142,},], //如果有業務數據,就按該格式綁定到這里},],};return option;},//用于在省級地圖,點擊空白處返回全國地圖,這里要根據自己的業務數據來判斷是否返回showChinaMap() {this.map.dispose();this.initMap();},//顯示各省地圖getProvinceMap(province) {echarts.registerMap("ditu", require(`../../static/province/${province}.json`)); //注冊省級地圖this.initMap("ditu");},initMap(place) {this.map = echarts.init(document.getElementById("map"));window.onresize = this.map.resize;let option = this.getMapOpt(place);if (option && typeof option === "object") {this.map.setOption(option, true);}this.map.on("click", (param) => {event.stopPropagation(); // 阻止冒泡// 找到省份名let provinceIndex = this.provincesText.findIndex((x) => {return param.name === x;});if (provinceIndex === -1) {// 沒找到省份名,代表進入到了市圖層,這里可以放業務代碼return;} else {this.map.dispose();this.province = this.provinces[provinceIndex];// 重新渲染各省份地圖this.getProvinceMap(this.province);}});},},
};
</script><style lang="less">
.g-home {height: 100%;overflow: hidden;opacity: 1;background: #ffffff;border-radius: 16px;box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);#map {width: 100%;height: 100%;background: #fff;border-radius: 4px;border: 1px solid #ebeef5;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);}
}
</style>文件下載路徑 ：https://download.csdn.net/download/weixin_44694682/18612280
)
)