實(shí)現(xiàn)如下效果?

用echarts geo類型的中國地圖封裝vue組件，具體的地圖信息china.json傳送門https://blog.csdn.net/qq_37860634/article/details/119854379

<!--強(qiáng)哥的自定義組件：高級封裝Echarts之chart-->
<template><div ref="sgChinaMapChart" class="sg-china-map-chart"></div>
</template>
<script>
import china from "./china.json";
export default {data() {return {componentName: "sg-china-map-chart", //組件名稱chart: null,provinces: [],};},props: ["data"],beforeDestroy() {this.chart && this.chart.off("click");this.chart && this.chart.clear();this.chart && this.chart.dispose(); //不進(jìn)行手動銷毀echarts，你會卡的要死！！！},mounted() {setTimeout(() => {this.init(this.data);addEventListener("resize", () => {this.chart && this.chart.resize(); //當(dāng)頁面大小變化→圖標(biāo)對應(yīng)變化});}, 108); //延時加載只為別太卡！},methods: {showProvinces(provinces) {this.provinces = provinces;var aa = provinces || [];for (var i = 0, l = aa.length; i < l; i++) {var a = aa[i];this.showProvince(a); //調(diào)用高亮顯示某個省份}},showProvince(name) {// console.log(name);this.chart &&this.chart.dispatchAction({type: "geoSelect",// 可選，系列 index，可以是一個數(shù)組指定多個系列// seriesIndex: 0,// 可選，系列名稱，可以是一個數(shù)組指定多個系列// seriesName: string|Array,// 數(shù)據(jù)的 index，如果不指定也可以通過 name 屬性根據(jù)名稱指定數(shù)據(jù)// dataIndex: 1,// 可選，數(shù)據(jù)名稱，在有 dataIndex 的時候忽略name, //省份的名稱（不含“省”）});},hideProvince(name) {this.chart &&this.chart.dispatchAction({type: "geoUnSelect",name, //省份的名稱（不含“省”）});},init(data) {if (!data)return this.$message({message: `您的組件${this.componentName}沒有傳參data`,type: "error",});this.$echarts.registerMap("china", china); //這句必須要否則地圖不會出現(xiàn)// 基于DOM，初始化echarts實(shí)例（注意！Vue的DOM日怪的很，一般要騰個1秒才加載完）this.chart = this.$echarts.init(this.$refs.sgChinaMapChart);// 轉(zhuǎn)換屬性為本地■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■var highlight = data.highlight || {};var target = data.target || {};var data = data.data || {};// series ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■const dotColor = "white"; //地圖上的標(biāo)記點(diǎn)顏色// const dotColor = "#087fd8", //地圖上的標(biāo)記點(diǎn)顏色const lineColor = ["#067DD6", "#067dd6"]; //地圖省邊框線、遷徙軌跡線條顏色（線性漸變：上，下）const selectedBorderColor = "#067DD6"; //被選中地圖省份邊框顏色const borderColor = "#A4D9FF"; //地圖省份邊框顏色const selectedAreaColor = ["#1D99F5", "#1D99F5"]; //被選中地圖省份填充色（徑向漸變：內(nèi)，外）const areaColor = ["#d6edff", "#d6edff"]; //地圖省份填充色（徑向漸變：內(nèi)，外）const emphasisAreaColor = ["#1D99F5 ", "#1D99F5 "]; //移入地圖省份時的填充色（徑向漸變：內(nèi)，外）const targetName = target.name;const targetCoordinate = target.coordinate;var citys = [];var moveLines = [];var arr = data;for (var i = 0, len = arr.length; i < len; i++) {var a = arr[i];var city = {name: a.from,value: a.coordinate,itemStyle: { normal: { color: lineColor } },};var moveline = {fromName: a.from,toName: targetName,coords: [a.coordinate, targetCoordinate],};citys.push(city);moveLines.push(moveline);}targetName &&citys.push({name: targetName,value: targetCoordinate,symbolSize: 10, //聚焦的城市點(diǎn)點(diǎn)大小itemStyle: { normal: { color: dotColor } },});this.chart.clear();this.chart.setOption({//animation: false, //太卡了geo: {// ----------------------------------------// silent: true, //禁止用鼠標(biāo)點(diǎn)擊觸發(fā)高亮selectedMode: "multiple", //???這個必須要設(shè)置（否則地圖不能接受dispatch的geoSelect事件用代碼觸發(fā)選中高亮某個省份）// ----------------------------------------map: "china",zoom: 1.2, //中國地圖默認(rèn)縮放大小roam: true,// 移入狀態(tài)高亮情況下的樣式emphasis: {label: {show: true, //移入的時候顯示文本color: "white",textBorderColor: selectedBorderColor,textBorderWidth: 1,},},// 普通狀態(tài)下的地圖省份樣式itemStyle: {normal: {// areaColor: areaColor,// 徑向漸變，前三個參數(shù)分別是圓心 x, y 和半徑，取值同線性漸變areaColor: {type: "radial",x: 0.5,y: 0.5,r: 1.5,colorStops: [{offset: 0,color: areaColor[0], // 0% 處的顏色},{offset: 1,color: areaColor[1], // 100% 處的顏色},],global: false, // 缺省為 false},borderColor,borderWidth: 1,},emphasis: {// areaColor: emphasisAreaColor, //鼠標(biāo)指上時的顏色// 徑向漸變，前三個參數(shù)分別是圓心 x, y 和半徑，取值同線性漸變areaColor: {type: "radial",x: 0.5,y: 0.5,r: 1.5,colorStops: [{offset: 0,color: selectedBorderColor, // 0% 處的顏色},{offset: 1,color: selectedBorderColor, // 100% 處的顏色},],global: false, // 缺省為 false},borderColor: selectedBorderColor,borderWidth: 2,},},// 被選中狀態(tài)下的地圖省份樣式select: {label: {show: false, //1.國內(nèi)業(yè)務(wù)布局：地圖上省份的文字 最好不顯示 和設(shè)計稿一致color: "white",textBorderColor: selectedBorderColor,textBorderWidth: 1,},itemStyle: {// areaColor: areaColor,// 徑向漸變，前三個參數(shù)分別是圓心 x, y 和半徑，取值同線性漸變areaColor: {type: "radial",x: 0.5,y: 0.5,r: 1.5,colorStops: [{offset: 0,color: selectedAreaColor[0], // 0% 處的顏色},{offset: 1,color: selectedAreaColor[1], // 100% 處的顏色},],global: false, // 缺省為 false},borderColor: selectedBorderColor,borderWidth: 2,},},},series: [{name: "地點(diǎn)",type: "effectScatter",coordinateSystem: "geo",zlevel: 2,rippleEffect: {brushType: "stroke",},label: {show: true,emphasis: {show: true,textStyle: {color: dotColor,textBorderColor: selectedBorderColor,textBorderWidth: 1,}, //移入地點(diǎn)顯示名稱樣式position: "right",formatter: "{b}",},},symbolSize: 1, //遷徙軌跡出發(fā)點(diǎn)大小showEffectOn: "render",itemStyle: {normal: {color: lineColor,},},data: citys,},{name: "線路",type: "lines",coordinateSystem: "geo",zlevel: 2,large: true,effect: {show: true,constantSpeed: 30,symbol: "pin",symbolSize: 5, //遷徙軌跡上面移動的小點(diǎn)點(diǎn)大小trailLength: 0,},lineStyle: {normal: {// 線性漸變，前四個參數(shù)分別是 x0, y0, x2, y2, 范圍從 0 - 1，相當(dāng)于在圖形包圍盒中的百分比，如果 globalCoord 為 `true`，則該四個值是絕對的像素位置color: new this.$echarts.graphic.LinearGradient(0,0,0,1,[{offset: 0,color: lineColor[0],},{offset: 1,color: lineColor[1],},],false),width: 1, //遷徙軌跡線條粗細(xì)opacity: 0.5, //遷徙軌跡線條透明度curveness: 0.1, //遷徙軌跡線條弧度},},data: moveLines,},],});//點(diǎn)擊事件,根據(jù)點(diǎn)擊某個省份計算出這個省份的數(shù)據(jù)this.chart && this.chart.off("click");this.chart.on("click", (params) => {// ba(params);console.log("點(diǎn)擊的省份名稱：",params.name,this.provinces,this.provinces.includes(params.name));this.provinces.includes(params.name)? this.showProvince(params.name): this.hideProvince(params.name);});// console.log(highlight);var aa = highlight.provinces || [];for (var i = 0, l = aa.length; i < l; i++) {var a = aa[i];this.showProvince(a); //調(diào)用高亮顯示某個省份}},},
};
</script>
<style lang="scss" scoped>
@import "~@/css/sg";
.sg-china-map-chart {position: absolute;top: 0;bottom: 0;left: 0;right: 0;
}
</style>

?調(diào)用

import sgChinaMapChart from "@/vue/components/sg-charts/sg-china-map-chart"; //引入強(qiáng)哥中國地圖<!-- 強(qiáng)哥的中國地圖 -->
<sg-china-map-chartref="chinaMap":data="chinaMapData"style="width: 100%; height: 100%"
/>//在script的data里面加入↓
chinaMapData: {highlight: {province: "四川",//高亮顯示省份},target: {name: "九寨溝",//聚焦的城市名稱coordinate: [100.301299,31.688516],},data: [//遷徙軌跡// { from: "河池", coordinate: [108.08526, 24.69293], count: 1 },],
},

總結(jié)

以上是生活随笔為你收集整理的封装echarts china map geo实现dispatch触发geoSelect事件高亮显示某个省份和城市，并定义复杂样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。