html代码
script
这里引入了俩个接口
接口格式
接口格式
主要用到了这个weihai.json
r打印结果
r.data.geoJson获取放到文件夹里面
打开之后就是坐标地区什么的
打印data数据就是weihai.json数据
完整代码
<template>
<div>
<div class="linkageMechanismManagement_box">
<div class="map_bg" ref="echartsMap"></div>
</div>
</div>
</div>
</template>
<script>
import * as echarts from "echarts";
import countTo from "vue-count-to";
import {
treeselect,
} from "@/api/dataScreen/linkageMechanismManagement_wz";
import { getDept } from "@/api/system/dept";
export default {
name: "linkageMechanismManagement",
components: {},
data() {
return {
itemList: [],
open: false,
deptId: 100,
deptArr: [],
};
},
mounted() {
this.echartsMap();
},
methods: {
echartsMap() {
let _this = this;
let params = {
parentId: "100",
};
//环翠区 临港区
treeselect().then((response) => {
// console.log(params);
console.log(response);
response.data.map((res) => {
_this.deptArr.push({
name: res.label,
id: res.id,
});
console.log(_this.deptArr);
});
getDept("100").then((r) => {
// r里面有geoJson数据
console.log(r);
if (r.data.geoJson != null && r.data.geoJson != "") {
// 初始化地图
var directlyEcharts = echarts.init(this.$refs.echartsMap);
//引入地图weihai.json 到 assets/maps路径
// data 环翠区 荣成市 乳山市 文登区
require(["@/assets/maps/" + r.data.geoJson], function (data) {
console.log(data);
// echarts.registerMap('地图名（如：jiangsu）', geoJson, {})
echarts.registerMap("city", data);
// data就是加载json威海里面的数据
// console.log(data);
let options = {
// `series`。 系列列表。每个系列通过 `type` 决定自己的图表类型
series: [
{
name: "廉政风险",
//类型固定格式
type: "map",
//地图名字
map: "city",
label: {
// show: true,
},
// 放大缩小
roam: true, //true
// 放大缩小的比例
zoom: 1,
itemStyle: {
normal: {
label: {
//字体显示
show: true,
//字体大小颜色
textStyle: {
color: "#fff",
rich: {
ys: {
align: "center",
fontSize: 32,
fontFamily: "DSDIGI",
},
tit: {
padding: 6,
fontSize: 16,
},
},
},
},
areaColor: "rgba(14,157,229,.2)", //地图背景颜色
borderColor: "#8ee0d1",
borderWidth: 1,
shadowColor: "rgba(0,0,0,.2)",
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 8,
},
emphasis: {
label: {
show: true,
},
areaColor: "#ffd853", //hover颜色
},
},
},
],
};
directlyEcharts.setOption(options);
directlyEcharts.on("click", function (params) {
if (_this.deptId == params.data.id) {
_this.deptId = 100;
} else {
_this.deptId = params.data.id;
}
});
});
return directlyEcharts;
} else {
}
});
});
},
},
};
</script>
<style scoped lang="scss">
.linkageMechanismManagement_box {
.map_bg {
width: 100vw;
height: 100vh;
background-size: 100% 100%;
position: absolute;
z-index: 2;
}
}
</style>