vue+echarts ----中国地图下拉选择省份地图中的省份区域高亮显示以及飞线图的效果

1、父组件核心代码：【@/utils/area的详细数据】、【@/utils/china详细数据】

<template><div class="center"><div class="digital"><el-selectpopper-class="selectz"v-model="areaValue"placeholder="请选择":popper-append-to-body="false"><el-optionv-for="item in areaListOptions":key="item.value":label="item.label":value="item.label"></el-option></el-select></div><!-- 中国地图 --><ChinaMapAnimation :chartData="chartData" :provinceName="areaValue"></ChinaMapAnimation></div></template>

<script>
import "@/utils/china"; //在[https://datav.aliyun.com/portal/school/atlas/area_selector]中下载全国的json数据
import areaList from '@/utils/area'; //下拉框的数据 
import ChinaMapAnimation from "./components/chinaMapAnimation.vue";
export default {components: {ChinaMapAnimation,},data() {return {areaListOptions: areaList, //中国区域数据areaValue: "全国",}},mounted() {this.areaListOptions.unshift({ value: "all", label: "全国" });},}</script><style scoped lang="scss">
.digital {// width: 350px;width: 100%;height: auto;position: absolute;// left: 28%;top: 2%;z-index: 99;text-align: center;::v-deep .el-input__inner {background-color: transparent;border: none;font-size: 36px;line-height: 50px;height: 50px;caret-color: transparent;letter-spacing: 6px;text-align: center;// font-weight: bold;color: #6690ff;text-shadow: 2px 2px #eee;padding: 0;}::v-deep .el-select .el-input .el-select__caret {font-size: 24px;color: #6690ff;text-shadow: 1px 1px #eee;}::v-deep .el-cascader {.el-input__icon:before {content: "\e78f";}}::v-deep .el-select {.el-select__caret:before {content: "\e78f";}}::v-deep .el-input__suffix {left: 0;top: 30px;}::v-deep .el-select-dropdown__item {color: #eee;}::v-deep .el-select-dropdown__item.hover {background-color: #5483d3;color: #eee;}::v-deep .el-scrollbar__wrap {margin-bottom: -8px !important;margin-right: -6px !important;}::v-deep .el-popper[x-placement^="bottom"] .popper__arrow::after {border-bottom-color: #5483d3;display: none;}::v-deep .el-popper[x-placement^=bottom] .popper__arrow{display: none;}//::v-deep .el-select-dropdown {background-color: transparent;border-color: #5483d3;}
</style>

2.地图子组件的全部代码

<template><divclass="centerMap"id="echartsMap"style="width: 100%; height: 600px"></div>
</template><script>
// 引入echarts
import * as echarts from "echarts";export default {props: {provinceName: {//父组件传入地图名称type: String,default: "北京市",},},components: {},data() {// 这里存放数据return {myChart: null,};},watch: {provinceName(newvalue, oldValue) {if (newvalue != oldValue) {this.init();}},immediate: false},mounted() {this.init();},beforeDestroy() {if (this.myChart) {this.myChart.dispose();}},// 方法集合methods: {init() {let chartDom = document.getElementById("echartsMap");const myChart = echarts.init(chartDom);this.myChart = myChart;const chinaGeoCoordMap = {黑龙江: [127.9688, 45.368],内蒙古: [110.3467, 41.4899],吉林: [125.8154, 44.2584],宜宾市: [104.630825, 28.760189],辽宁: [123.1238, 42.1216],河北: [114.4995, 38.1006],北京: [116.405285, 39.904989],天津: [117.4219, 39.4189],山西: [112.3352, 37.9413],陕西: [109.1162, 34.2004],甘肃: [103.5901, 36.3043],宁夏: [106.3586, 38.1775],青海: [101.4038, 36.8207],新疆: [87.9236, 43.5883],西藏: [91.11, 29.97],四川: [103.9526, 30.7617],重庆: [108.384366, 30.439702],山东: [117.1582, 36.8701],河南: [113.4668, 34.6234],江苏: [118.8062, 31.9208],安徽: [117.29, 32.0581],湖北: [114.3896, 30.6628],浙江: [119.5313, 29.8773],福建: [119.4543, 25.9222],江西: [116.0046, 28.6633],湖南: [113.0823, 28.2568],贵州: [106.6992, 26.7682],云南: [102.9199, 25.4663],广东: [113.12244, 23.009505],广西: [108.479, 23.1152],海南: [110.3893, 19.8516],上海: [121.4648, 31.2891],};// 散点const chinaDatas = [];const mapObject = { name: "", value: null };// 飞线const lineObject = { coords: [[117.4219, 39.4189]] };const linesCoord = [];for (const key in chinaGeoCoordMap) {mapObject.name = key;mapObject.value = chinaGeoCoordMap[key];chinaDatas.push(JSON.parse(JSON.stringify(mapObject)));if (key !== "天津") {lineObject.coords[1] = chinaGeoCoordMap[key];linesCoord.push(JSON.parse(JSON.stringify(lineObject)));}}const option = {  geo: {map: "china",show: true,roam: false,layoutCenter: ["50%", "68%"], //地图位置layoutSize: "128%",label: {emphasis: {show: false,},},// 选中的地区域高亮颜色**********重点regions: [{name: this.provinceName,itemStyle: {areaColor: "#FFB800",},},],// 地图的背景色itemStyle: {normal: {areaColor: "#09184F",borderColor: "#00ffff",shadowColor: "#6690FF",shadowBlur: 10,},emphasis: {areaColor: "#477BFF",},},},series: [{type: "effectScatter",coordinateSystem: "geo",// 要有对应的经纬度才显示，先经度再维度data: chinaDatas,showEffectOn: "render",rippleEffect: {scale: 4, // 波纹的最大缩放比例brushType: "stroke",},hoverAnimation: true,label: {normal: {show: true,formatter: "{b}",position: "right",fontWeight: 500,fontSize: 14,},},itemStyle: {normal: {color: "#00e3ff",shadowBlur: 10,shadowColor: "#333",},},emphasis: {itemStyle: {color: "#FFB800", // 高亮颜色},},zlevel: 1,},{type: "lines",coordinateSystem: "geo",zlevel: 1,effect: {show: true,period: 5,trailLength: 0,symbol: "arrow",color: "#01AAED",symbolSize: 8,},lineStyle: {normal: {width: 1.2,opacity: 0.6,curveness: 0.2,color: "#FFB800",},},data: linesCoord,},],};myChart.setOption(option);// 省份高亮函数// if (this.provinceName) {//   myChart.dispatchAction({//     type: "downplay",//     seriesIndex: 0,//     name: this.provinceName,//   });//   myChart.dispatchAction({//   type: "highlight",//   seriesIndex: 0,//   dataIndex: myChart//     .getOption()//     .series[0].data.findIndex((item) => item.name === this.provinceName),//   name: this.provinceName,// });// }},},
};
</script>
<style lang="scss" scoped>
.centerMap {width: 100%;height: 600px;// position: absolute !important;margin: 0 auto;margin-top:-10px;::v-deep canvas {width: 100% !important;}
}
</style>