选中省份联动对应的二级市或三级区县，有项目的地区进行高亮标点，浮窗显示具体数值
//main.js 引入echarts
import * as echarts from 'echarts';
Vue.prototype.$echarts = echarts
<!--父组件 全国地图-->
<div class="map" id="map"></div>
<script>
//引用地址在下方
import china from '/public/json/china.json'
import { Mapprovinces, MapprovincesText } from "./provinces.js";
export default {
data(){
return{
Mapprovinces,
MapprovincesText,
provinceInfo: {},
projectMapVis:false
}
},
mounted(){
this.init()
},
methods:{
// 该需求为通过点击省份获取该省份下的所有市(二级)/区县（三级）
init(){
this.$echarts.registerMap('china', china);
const provinceList = china.features;
// axios 获取后端数据，通过循环对比获取对应的经纬度，进行标点
/**
let res = 'api/xxxxxxx'
provinceList.filter(pl => {
res.filter(al => {
if (al.areaCode === pl.id) {
projectNums.push({
name: pl.properties.name,
value: al.num,
})
effectScatterData.push({
name: pl.properties.name,
value: pl.properties.cp,
num: al.num
})
}
})
})
*/
// 所需数据格式
let projectNums = [{name:'云南',value:5},{name:'广西',value:1}]; // 项目省份
let effectScatterData = [
{name:'云南',value:[101.712251, 24.040609],num:5},
{name:'广西',value:[108.720004, 23.82402],num:1}
]; //散点数据
const myChart = this.$echarts.init(document.getElementById('map'), null, {renderer: 'svg'});
let option = {
tooltip: {//提示框组件
trigger: 'item',
formatter: function (item) {
if (item.componentSubType == 'map' && item.value) {
return item.name + `<strong style="fontStyle:normal">${item.value}</strong>`
} else if (item.componentSubType == 'effectScatter' && item.data.num) {
return item.name + `<strong style="fontStyle:normal">${item.data.num}</strong>`
} else {
return item.name
}
},
show: true,
borderColor: '#fff',
padding: [4, 15],
textStyle: {
color: "#262F3F",
fontSize: 10
}
},
geo: {
map: 'china',
aspectScale: 0.75,
selectedMode: false,
layoutCenter: ["50%", "50%"],
layoutSize: '100%',
regions: [{
name: '南海诸岛',
itemStyle: {
areaColor: 'rgba(0, 10, 52, 1)',
borderColor: '#aee9fb',
normal: {
opacity: 0,
label: {
show: false,
color: "#009cc9",
}
},
},
label: {
show: false,
color: '#262F3F',
fontSize: 10,
},
}],
},
visualMap: {
show: false,
min: 1,
inRange: {
color: ['#EFF4F9']
},
},
series: [
// 常规地图
{
type: 'map',
mapType: 'china',
aspectScale: 0.75,
layoutCenter: ["50%", "50%"],
layoutSize: '100%',
label: {
show: true, //区域
formatter: '{b}',
color: '#262F3F',
fontSize: 10,
},
itemStyle: { // 区域样式
normal: {
areaColor: {
type: 'linear',
x: 0,
y: 0,
x2: 1,
y2: 1,
colorStops: [{
offset: 0, color: '#D7E0EC'
}, {
offset: 1, color: '#D1DBE8'
}],
global: false
}, // 背景
borderColor: '#A1AFC6',
borderWidth: 1
},
emphasis: { // 区域hover样式
areaColor: 'pink',
label: {
color: "#262F3F"
}
},
},
select: { // 区域选中样式
itemStyle: {
areaColor: 'pink'
},
label: {
color: "#262F3F"
}
},
data: projectNums
},
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 4,
rippleEffect: { //点动画
color: '#0051D9',
period: 3,
scale: 5,
brushType: 'fill'
},
// 坐标点
data: effectScatterData,
symbolOffset: ['-150%', '-150%'] // 光标偏移
},
]
};
let that = this
myChart.on('click', function (params) {
if (params.name == '南海诸岛') { return }
provinceList.filter(pl => {
if (pl.properties.name === params.name) {
params.areaCode = pl.id
}
})
//点击省份显示二级或三级（市、区县地图）
that.projectMapVis = true;
myChart.setOption(option);
that.provinceInfo = params // 子组件用
});
myChart.setOption(option);
window.addEventListener("resize", function () {
myChart.resize();
});
}
}
}
</script>
<!--子组件 根据所选省份联动的市/区县地图-->
<div class="map" id="provinceMap"></div>
<script>
import axios from "axios";
import { MapprovincesText, Mapprovinces } from "./provinces.js";
export default {
data () {
return {
MapprovincesText,
Mapprovinces
}
},
methods:{
// 省份点击后调用 传递 provinceInfo 参数
getCity(params){
for (var i = 0; i < this.MapprovincesText.length; i++) {
if (params.name == this.MapprovincesText[i]) {
//点击获取对应城市数据
const name = this.Mapprovinces[i]
//JSON数据在下方 来源datav
let url = '/json/province/' + name + '.json';
axios.get(url).then(res => {
this.canvasProvinceMap(name, params.areaCode, res.data)
})
break;
}
}
},
//绘制
canvasProvinceMap: function (name, areaCode, mapData) {
let _this = this;
const params = {
queryRange: "province",
queryValue: areaCode
}
axios.get('xxxxxx').then(res => {
const regionMapData = mapData.features;
let projectNumData = [];
let effectScatterData = [];
regionMapData.filter(pl => {
res.filter(al => {
if (al.areaCode == pl.properties.adcode) {
projectNumData.push({
name: pl.properties.name,
value: al.num,
areaCode: al.areaCode
})
effectScatterData.push({
areaCode: al.areaCode,
name: pl.properties.name,
// value: al.coordinate.split(','),
value: pl.properties.centroid,
num: al.num
})
}
})
})
const provinceChart = this.$echarts.init(document.getElementById('provinceMap'), null, { renderer: 'svg' });
this.$echarts.registerMap(name, mapData);
//移除点击事件
provinceChart.off('click')
// 绘制图表
let option = {
tooltip: {
trigger: 'item',
formatter: function (item) {
if (item.componentSubType == 'map' && item.value) {
return item.name + item.value
} else if (item.componentSubType == 'effectScatter' && item.data.num) {
return item.name + item.data.num
} else {
return item.name
}
},
show: true,
borderColor: '#fff',
padding: [4, 15],
textStyle: {
color: "#262F3F",
fontSize: 8
}
},
geo: {
type: 'map',
map: name, //省份
selectedMode: false,
aspectScale: 0.75,
layoutCenter: ["50%", "50%"],
layoutSize: '100%',
roam: true, //是否平游或缩放
scaleLimit: { //滚轮缩放的极限控制
min: 1,
max: 30
},
label: {
show: true, //区域名称样式
color: '#262F3F',
fontSize: 8
},
itemStyle: { // 区域样式
normal: {
areaColor: '#EFF4F9',// 背景
borderColor: '#A1AFC6',
borderWidth: 1
},
emphasis: { // 区域hover样式
areaColor: 'pink',
label: {
color: "#262F3F",
fontSize: 8,
}
},
},
select: { // 选中样式
itemStyle: {
areaColor: '#BCDAFF'
}
},
},
visualMap: {
show: false,
min: 1,
inRange: {
color: ['#BCDAFF']
},
},
series: [
{
type: 'map',
mapType: name,
geoIndex: 0,
aspectScale: 0.75,
layoutCenter: ["50%", "50%"],
layoutSize: '100%',
data: projectNumData
},
// 区域散点图
{
type: 'effectScatter',
coordinateSystem: 'geo',
symbolSize: 3,
rippleEffect: { //点动画
color: '#0051D9',
period: 3,
scale: 3,
brushType: 'fill'
},
data: effectScatterData
}
]
};
//散点点击事件
provinceChart.on('click', function (params) {
});
provinceChart.clear();
setTimeout(() => {
provinceChart.setOption(option);
}, 300)
window.addEventListener("resize", function () {
provinceChart.resize();
});
})
},
}
}
</script>
静态资源
//provinces.js
const iconRQ = "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAUCAYAAABiS3YzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjNCRkRBMEJBQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjNCRkRBMEJCQzgwRjExRUFBNUI0RTMyMThEN0UxMzFEIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6M0JGREEwQjhDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6M0JGREEwQjlDODBGMTFFQUE1QjRFMzIxOEQ3RTEzMUQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5mT42iAAABQ0lEQVR42mL8LabOQCQIBOL1xChkItJAkLp+IBajpqFWQCwPxJ7UNDQCSgdQy1BmIA6Bsl2AmJMahjoAsTiUzQPETtQwNAKN709IAwvUayZQ/hcg/o0k/x6Ig9D0+ABxKJT9HYh/oMm/BBm6GYitgTgfiBmJcLkkEK/CIXcGiGNB3v8JxIVQF31gIA/8AeIWaNK7gRymG4BYH4hPkGjgXSC2A+JaWNChR9QjqIJeIP5PhIGzgdgAiI8Tin2QbSVAvIOAgROBOA0auUQlKV4gtidgqBGp6RSUFrmIKA/ESDEUPcGfBOIUIH6Lln29iTVUCIjdkJJKExDbAPFcqJdPEMpd2AwF5TBWaFKxBeJ6qOHIqaMbmjrcsBUw2AwNh7rKAEeaBaWOMiD2BeJvQOxOyFBuaFJJwZZU0MBWaHCIo0sABBgAetA4Jx5t/ToAAAAASUVORK5CYII="
const Mapprovinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen', 'taiwan'];
const MapprovincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
export {
iconRQ,
Mapprovinces,
MapprovincesText,
};
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
