知识点：
1.获取地区json数据：地理小工具

2.如果想特殊显示某个地区，但是json文件里面没有这个地区，可以直接在地理小工具里面复制出这个地区的json，按照格式复制进去就可以了

3.地图点击获取经纬度

 //点击事件this.myChart.on("click", (param) => {let data = this.myChart.convertFromPixel("geo", [param.event.offsetX,param.event.offsetY,]);console.log(data);//可以知道点击的具体坐标位置// this.$emit("clickMap", params);});

完整代码：

<template><divclass="mapChart"id="cqChart":style="`width:100%;height:${height}`"></div>
</template><script>
import china from "./china2.json";
import * as echarts from "echarts";
export default {name: "cqChart",props: {},data() {return {height: "",myChart: null,};},created() {//页面创建时执行一次getHeight进行赋值，顺道绑定resize事件window.addEventListener("resize", this.getHeight);this.getHeight();},activated() {this.myChart.resize();},mounted() {this.myChart = echarts.init(document.getElementById("cqChart"));this.myChart.on("click", (param) => {//点击事件let data = this.myChart.convertFromPixel("geo", [param.event.offsetX,param.event.offsetY,]);console.log(data);//可以知道点击的具体坐标位置// this.$emit("clickMap", params);});echarts.registerMap("泸州市", china);this.setOption();window.addEventListener("resize", () => {this.myChart.resize();});},methods: {//定义方法，获取高度减去头尾getHeight() {this.height = window.innerHeight - 280 + "px";},setOption() {let series = [];series.push(this.getSerise());//散点标记series.push(this.getSeriseLine());//画线let myChart = this.myChart;let option = {geo: {map: "泸州市",// roam: "scale", //只开启缩放zoomSensitivity: false,center: [105.703348, 28.109138], //中心坐标itemStyle: {areaColor: "rgba(0,0,0,0)",borderColor: "#0b827e",borderWidth: 2,},regions: [//高亮显示{name: "泸州市", //这个名字要和china.js保持一致itemStyle: {normal: {areaColor: "#0f6f91", // 背景颜色borderColor: "#f0f",borderWidth: 1, // 边框宽度shadowBlur: 3, // 阴影泛化程度borderWidth: 0, //描边线宽。为 0 时无描边shadowOffsetX: 3, //阴影水平方向上的偏移距离shadowOffsetY: 3, //阴影垂直方向上的偏移距离},},},],zoom: 7, //视角缩放比例//72label: {show: true,formatter: function (params) {let item = null;if (params.name == "泸州市") {//只显示泸州市名称let name = params.name;return `{a|${name}}`}return "";},fontSize: "10",color: "#fff",lineHeight: 20,rich: { a: { fontSize: 16 } },},emphasis: {disabled: true,itemStyle: {areaColor: "red", //鼠标选择区域颜色shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},tooltip: {},series: series,};myChart.setOption(option);},getSerise() {let list = [{name: "河源",value: [105.42678508916828, 27.95926151571386],id: 3,type: "pie",},{name: "云山坝集气站",value: [105.34318636249864, 28.097542971129727],id: 3,type: "flag",},];let data = {type: "scatter",map: "china",coordinateSystem: "geo",zlevel: 10,data: list,tooltip: {formatter(d) {},},symbolSize: 0,position: "top",label: {show: true,formatter: (params) => {return ("{" + params.data.type + "|}{cValue|" + params.data.name + "}");},// lineHeight: 20,position: "inside",padding: [1, 3, 1, 3],color: "#ffffff",fontSize: 13,fontWeight: "normal",rich: {pie: {lineHeight: 35,height: 20,width: 20,backgroundColor: {image:"https://cdn.minexiot.com/bigscreen/datav-img/c.png",},borderWidth: 1,verticalAlign: "middle",align: 'center',lineHeight:25,},flag: {height: 25,width: 25,backgroundColor: {image: "https://cdn.minexiot.com/bigscreen/datav-img/hq2.png",},borderWidth: 1,verticalAlign: "middle",align: "center",},cValue: {color: "#fff",padding: [3, 3, 0, 3],align: "center",fontSize: 14,// lineHeight: 35,// backgroundColor: "yellow",},},},};return data;},getSeriseLine() {let list = [{point: ["浙油", "西湖变"],coords: [[105.50721546227007, 28.109538815812808],[105.53928072729404, 28.128777974827187],],},{point: ["浙油", "大树"],coords: [[105.50461015948687, 28.09786505526501],[105.51042198877246, 28.07506865591204],],},];let data = {name: "",type: "lines",zlevel: 6,lineStyle: {type: "dashed",width: 2,opacity: 1,curveness: 0,orient: "horizontal",color: "#fff",},show: true,data: list,tooltip: {formatter(d) {},},};return data;},},
};
</script><style  lang="scss" scoped>
</style>