知识点：
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>
<div
class="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, //视角缩放比例//72
label: {
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>