创建public\mapJson文件夹,置入需要的地图json文件
文章顶部文件包含河南省内所有市级json
组件代码
<template>
<div>
<div ref="geoEcharts" class="geo-echart"></div>
</div>
</template>
<script>
import * as echarts from "echarts";
import axios from "axios";
export default {
name: "Geo",
props: {
height: {
type: String,
default: "100vh",
},
geoCoordMap: {
default: "",
},
value: {
type: Number,
default: 10,
},
},
data() {
return {
timer: null,
seriesData: [],
// geoCoordMap: {
// 1: [114.837341, 34.731281],
// 2: [113.637341, 34.531281],
// },
series: [],
map: null,
code: "410000",
};
},
watch: {
height(val) {
this.initGeoEcharts();
},
geoCoordMap(val) {
this.initGeoEcharts();
},
},
created() {},
mounted() {
this.initGeoEcharts();
},
destroyed() {
window.onresize = null;
},
methods: {
initGeoEcharts() {
if (this.geoCoordMap) {
console.log(this.geoCoordMap);
for (let i in this.geoCoordMap) {
this.seriesData.push({ name: i, value: this.value });
}
}
// console.log(this.series);
this.getConfigKey("wg.city.code").then((response) => {
this.code = response.msg || "410000";
console.log(this.code);
axios.get(`./mapJson/${this.code}.json`).then((res) => {
echarts.registerMap("hn", res.data);
this.$nextTick(() => {
const map = echarts.init(this.$refs["geoEcharts"], null, {
renderer: "svg",
});
if (this.height) {
this.$refs.geoEcharts.style.height = this.height;
map.resize();
}
const option = {
// 悬浮窗
tooltip: {},
geo: [
{
map: "hn",
zoom: 1,
// roam: "move",
roam: true,
tooltip: {
show: true,
},
label: {
show: true,
color: "#fff",
position: "inside",
distance: 0,
fontSize: 14,
emphasis: {
show: true,
color: "#6eeffd",
},
},
// 所有地图的区域颜色
itemStyle: {
normal: {
areaColor: "rgba(0,60,153,0.6)",
borderColor: "#02c0ff",
},
},
emphasis: {
itemStyle: {
areaColor: "rgba(0,60,153,0.5)",
shadowColor: "rgba(0,0,0,0.8)",
shadowBlur: 5,
shadowOffsetY: 5,
},
},
// 针对某些区域做一些特别的样式
// regions: [{
// name: '广东省',
// itemStyle: {
// areaColor: 'yellow',
// color: 'black',
// borderColor: 'pink'
// }
// }]
},
],
xAxis: {
axisLine: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
},
yAxis: {
axisLine: { show: false },
splitLine: { show: false },
axisLabel: { show: false },
axisTick: { show: false },
},
// 数据
series: [
{
name: "1", // series名称
type: "effectScatter",
coordinateSystem: "geo",
// data: this.series,
symbolSize: 16,
data: this.geoCoordMap
? this.convertData(this.seriesData)
: [],
encode: {
tooltip: 2,
},
symbolSize: function (params) {
return (params[2] / 100) * 15 + 5;
},
itemStyle: {
color: "#fc97af",
},
label: {
show: false,
formatter: "{b}",
position: "right",
},
tooltip: {
show: true,
confine: true,
formatter: "{b}",
},
emphasis: {
label: {
show: true,
},
},
},
// ,
// {
// type: "scatter",
// coordinateSystem: "geo",
// data: [],
// SymbolSize: 4,
// },
// {
// type: "lines",
// coordinateSystem: "geo",
// data: [
// {
// coords: [
// [121.15, 38],
// [111, 31.89],
// [100.15, 31.89],
// [121.15, 29.89],
// [105.15, 30.89],
// ],
// },
// ],
// polyline: true, // 是否是多段线
// // lineStyle: {
// // color: {
// // type: 'radial',
// // x: 0.5,
// // y: 0.5,
// // r: 0.5,
// // colorStops: [{
// // offset: 0, color: 'red' // 0% 处的颜色
// // }, {
// // offset: 1, color: 'blue' // 100% 处的颜色
// // }],
// // global: false, // 缺省为 false
// // shadowColor: 'rgba(0, 0, 0, 0.5)',
// // shadowBlur: 10,
// // curveness: 1
// // },
// // opacity: 0.3,
// // width: 2,
// // },
// // 线特效的配置
// effect: {
// show: true,
// period: 5, // 特效动画的时间,单位为 s
// trailLength: 1, //特效尾迹长度[0,1]值越大,尾迹越长重
// // symbol: 'image://' + require('@/echartsMap/money.png'), // 自定义动画图标
// symbolSize: 15, //图标大小
// color: "red",
// },
// },
],
};
map.setOption(option);
window.onresize = function () {
map.resize();
};
});
});
});
},
convertData(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = this.geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value),
});
}
}
return res;
},
},
};
</script>
<style>
.geo-echart {
height: calc(100vh * 1200 / 1920);
}
</style>