借鉴了 昨夜小楼又东风 这位兄弟的代码
https://blog.csdn.net/m0_46577631/article/details/124354267?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_title~default-0-124354267-blog-125216723.pc_relevant_downloadblacklistv1&spm=1001.2101.3001.4242.1&utm_relevant_index=2
首先引入echarts这些都不用说了
在阿里云可视化平台上请求或者下载你需要的省和市的json数据(我的是放在项目assets中的)
贴上地址:http://datav.aliyun.com/portal/school/atlas/area_selector#&lat=30.316551722910077&lng=106.68898666525287&zoom=3.5
只是暂时写的demo,正式数据还没拿过来放上去,颜色啥的都可以按照你们的设计走
下钻到市的
我们的设计是鼠标移动上去要显示上面的内容,下面的代码中只是mock了酒泉和下钻下去的敦煌的数据,其他市县的太多了就不一个一个写了,到时候直接拿后端的数据放上去就ok,当然你们想要啥样的可以自行修改( mapData 和 formatter 这俩地方)。
<template>
<div id="area">
<div >
<el-button type="primary" @click="backMap">返回上一级</el-button>
</div>
<div id="area-box"></div>
</div>
</template>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
dataMap: require('../../assets/gansuJson/gansu.json'), // 获取初始化省级地图数据
mapData: [
{
name: '兰州市',
value: '112',
code: '1011',
},
{
name: '嘉峪关市',
value: '396',
},
{
name: '金昌市',
value: '1125',
},
{
name: '白银市',
value: '635',
},
{
name: '天水市',
value: '586',
},
{
name: '武威市',
value: '360',
},
{
name: '张掖市',
value: '231',
},
{
name: '平凉市',
value: '196',
},
{
name: '酒泉市',
value: [
{
ztya: "11",
zxya: "222",
bmya: "33"
},
{
jrzb: [
{
title: "值班领导",
name: "张三",
zw: "局长",
phone: "15294111111",
phone2: "0913-0000000"
},
{
title: "值班人员",
name: "李四",
zw: "处长",
phone: "15294111222",
phone2: "0913-0222200"
}
]
}
]
},
{
name: '庆阳市',
value: '480',
},
{
name: '定西市',
value: '680',
},
{
name: '陇南市',
value: '880',
},
{
name: '临夏回族自治州',
value: '280',
},
{
name: '甘南藏族自治州',
value: '80',
},
],
};
},
mounted() {
this.$nextTick(() => {
this.getArea();
});
},
methods: {
getArea() {
const myChart = echarts.init(document.getElementById('area-box'));
echarts.registerMap('gansu', this.dataMap);
// 为地图做点击事件获取区域数据
myChart.off('click'); // 防止地图点击后多次渲染,导致页面卡顿
myChart.on('click', (data) => {
console.log("data.data",data.data);
this.changeMap(data.data);
});
// 注册矢量地图数据
var option = {
visualMap: {
// 视觉映射组件
show: false, // 图标legend显示否
inverse: true, // 反转
top: '70%',
bottom: '2%',
left: '2%',
textStyle: {
fontsize: 12,
},
// splitList: [
// // 自定义范围
// { start: 0, end: 100 },
// { start: 100, end: 300 },
// { start: 300, end: 500 },
// { start: 500, end: 1000 },
// { start: 1000 },
// ],
// color: ['#BF242A', '#CD5459', '#DC878A', '#EAB7B9', '#F3D7D9'], //自定义范围的颜色
},
tooltip: {
// trigger: 'item', //触发类型,'item'数据项图形触发,主要在散点图,饼图等无类目轴的图表中使用。 'axis'坐标轴触发,主要在柱状图,折线图等会使用类目轴的图表中使用。
// triggerOn:"mousemove", //提示框触发的条件,'mousemove'鼠标移动时触发。'click'鼠标点击时触发。'mousemove|click'同时鼠标移动和点击时触发。'none'不在 'mousemove' 或 'click' 时触发
// showContent:true, //是否显示提示框浮层
// alwaysShowContent:true, //是否永远显示提示框内容
// showDelay:0, //浮层显示的延迟,单位为 ms
// hideDelay:100, //浮层隐藏的延迟,单位为 ms
// enterable:false, //鼠标是否可进入提示框浮层中
// confine:false, //是否将 tooltip 框限制在图表的区域内
// transitionDuration:0.4, //提示框浮层的移动动画过渡时间,单位是 s,设置为 0 的时候会紧跟着鼠标移动
// position:['50%', '50%'], //提示框浮层的位置,默认不设置时位置会跟随鼠标的位置,[10, 10],回掉函数,inside鼠标所在图形的内部中心位置,top、left、bottom、right鼠标所在图形上侧,左侧,下侧,右侧,
// formatter:"{b0}: {c0}<br />{b1}: {c1}", //提示框浮层内容格式器,支持字符串模板和回调函数两种形式,模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等
// backgroundColor:"transparent", //标题背景色
// borderColor:"#ccc", //边框颜色
// borderWidth:0, //边框线宽
// padding:5, //图例内边距,单位px 5 [5, 10] [5,10,5,10]
// textStyle:mytextStyle, //文本样式
// 悬浮框
trigger: 'item', // 触发条件
backgroundColor: 'RGBA(136, 123, 135)',
// formatter: '{b}<br/>案件数{c}', // 自定义显示数据
formatter(params){
// console.log('params',params);
let str = `<div style=''>
<div>${params.data.name}药监局</div>
<div>应急预案</div>
<div>总体预案:${params.data.value[0].ztya}</div>
<div>专项预案:${params.data.value[0].zxya}</div>
<div>专项预案:${params.data.value[0].bmya}</div>
<div>今日值班</div>
<div style="display: flex;">
<div>带班领导:</div>
<div style="margin-right: 10px;">${params.data.value[1].jrzb[0].name}</div>
<div style="margin-right: 10px;">${params.data.value[1].jrzb[0].zw}</div>
<div style="margin-right: 10px;">${params.data.value[1].jrzb[0].phone}</div>
<div style="margin-right: 10px;">${params.data.value[1].jrzb[0].phone2}</div>
</div>
<div style="display: flex;">
<div>值班人员:</div>
<div style="margin-right: 10px;">${params.data.value[1].jrzb[1].name}</div>
<div style="margin-right: 10px;">${params.data.value[1].jrzb[1].zw}</div>
<div style="margin-right: 10px;">${params.data.value[1].jrzb[1].phone}</div>
<div style="margin-right: 10px;">${params.data.value[1].jrzb[1].phone2}</div>
</div>
</div>`;
return str;
},
textStyle: {
color: '#ffffff',
},
},
series: [
{
type: 'map',
map: 'gansu',
zoom: 1.2,
top: '10%',
x: 'center',
label: {
show: true, // 显示
},
itemStyle: {
normal: {
// 静态的时候显示的默认样式
borderWidth: 2, // 边框宽度
areaColor: '#4c60ff', // 设置地图颜色
borderColor: "#FABE19", // 边框颜色
textStyle:{color:"#c71585"}//省份标签字体颜色
},
emphasis: {
// 鼠标移入动态的时候显示的默认样式
// borderWidth: 2, // 边框宽度
show: true,
areaColor: "#293fff", //hover高亮时的地图颜色
color: "#fff",
},
},
// 数据
data: this.mapData,
},
],
};
myChart.setOption(option);
},
// 区域判定方法,对点击获取到的数据进行判断,然后去赋值相应的城市json数据
changeMap(data) {
if (data.name === '兰州市') {
this.dataMap = require('../../assets/gansuJson/lanzhou.json');
this.mapData = [
{
name: '城关区',
value: '1890',
},
{
name: '七里河区',
value: '3960',
},
{
name: '西固区',
value: '1125',
},
{
name: '安宁区',
value: '635',
},
{
name: '红古区',
value: '586',
},
{
name: '永登县',
value: '360',
},
{
name: '榆中县',
value: '231',
},
{
name: '皋兰县',
value: '196',
},
];
this.getArea();
} else if (data.name === '嘉峪关市') {
this.dataMap = require('../../assets/gansuJson/jiayuguan.json');
this.mapData = [
{
name: '嘉峪关市',
value: '1202',
},
];
this.getArea();
} else if (data.name === '金昌市') {
this.dataMap = require('../../assets/gansuJson/jinchang.json');
this.mapData = [
{
name: '金川区',
value: '1202',
},
{
name: '永昌县',
value: '396',
},
];
this.getArea();
} else if (data.name === '白银市') {
this.dataMap = require('../../assets/gansuJson/baiyin.json');
this.mapData = [
{
name: '白银区',
value: '1202',
},
{
name: '平川区',
value: '396',
},
{
name: '会宁县',
value: '1125',
},
{
name: '靖远县',
value: '635',
},
{
name: '景泰县',
value: '586',
},
];
this.getArea();
} else if (data.name === '天水市') {
this.dataMap = require('../../assets/gansuJson/tianshui.json');
this.mapData = [
{
name: '秦州区',
value: '1202',
},
{
name: '麦积区',
value: '396',
},
{
name: '甘谷县',
value: '1125',
},
{
name: '武山县',
value: '635',
},
{
name: '秦安县',
value: '586',
},
{
name: '清水县',
value: '360',
},
{
name: '张家川回族自治县',
value: '360',
},
];
this.getArea();
} else if (data.name === '武威市') {
this.dataMap = require('../../assets/gansuJson/wuwei.json');
this.mapData = [
{
name: '凉州区',
value: '1202',
},
{
name: '民勤县',
value: '396',
},
{
name: '古浪县',
value: '1125',
},
{
name: '天祝藏族自治县',
value: '635',
},
];
this.getArea();
} else if (data.name === '张掖市') {
this.dataMap = require('../../assets/gansuJson/zhangye.json');
this.mapData = [
{
name: '甘州区',
value: '1202',
},
{
name: '山丹县',
value: '396',
},
{
name: '民乐县',
value: '1125',
},
{
name: '临泽县',
value: '635',
},
{
name: '高台县',
value: '586',
},
{
name: '肃南裕固族自治县',
value: '360',
},
];
this.getArea();
} else if (data.name === '平凉市') {
this.dataMap = require('../../assets/gansuJson/pingliang.json');
this.mapData = [
{
name: '崆峒区',
value: '1202',
},
{
name: '泾川县',
value: '396',
},
{
name: '灵台县',
value: '1125',
},
{
name: '崇信县',
value: '635',
},
{
name: '华亭市',
value: '586',
},
{
name: '庄浪县',
value: '360',
},
{
name: '静宁县',
value: '360',
},
];
this.getArea();
} else if (data.name === '酒泉市') {
this.dataMap = require('../../assets/gansuJson/jiuquan.json');
this.mapData = [
{
name: '肃州区',
value: '1202',
},
{
name: '玉门市',
value: '396',
},
{
name: '敦煌市',
value: [
{
ztya: "11",
zxya: "222",
bmya: "33"
},
{
jrzb: [
{
title: "值班领导",
name: "张三",
zw: "局长",
phone: "15294111111",
phone2: "0913-0000000"
},
{
title: "值班人员",
name: "李四",
zw: "处长",
phone: "15294111222",
phone2: "0913-0222200"
}
]
}
]
},
{
name: '金塔县',
value: '635',
},
{
name: '瓜州县',
value: '586',
},
{
name: '肃北县',
value: '360',
},
{
name: '阿克塞哈萨克族自治县',
value: '2897',
},
];
this.getArea();
} else if (data.name === '庆阳市') {
this.dataMap = require('../../assets/gansuJson/qingyang.json');
this.mapData = [
{
name: '西峰区',
value: '1202',
},
{
name: '庆城',
value: '396',
},
{
name: '华池',
value: '1125',
},
{
name: '宁县',
value: '635',
},
{
name: '镇原',
value: '586',
},
{
name: '合水',
value: '360',
},
{
name: '正宁',
value: '908',
},
{
name: '环县',
value: '928',
},
];
this.getArea();
} else if (data.name === '定西市') {
this.dataMap = require('../../assets/gansuJson/dinxi.json');
this.mapData = [
{
name: '安定区',
value: '1202',
},
{
name: '通渭县',
value: '396',
},
{
name: '陇西县',
value: '1125',
},
{
name: '渭源县',
value: '635',
},
{
name: '临洮县',
value: '125',
},
{
name: '漳县',
value: '625',
},
{
name: '岷县',
value: '632',
},
];
this.getArea();
} else if (data.name === '陇南市') {
this.dataMap = require('../../assets/gansuJson/longnan.json');
this.mapData = [
{
name: '武都区',
value: '1202',
},
{
name: '成县',
value: '396',
},
{
name: '文县',
value: '1125',
},
{
name: '宕昌县',
value: '635',
},
{
name: '康县',
value: '586',
},
{
name: '西和县',
value: '360',
},
{
name: '礼县',
value: '2789',
},
{
name: '徽县',
value: '2789',
},
{
name: '两当县',
value: '2789',
},
];
this.getArea();
} else if (data.name === '临夏回族自治州') {
this.dataMap = require('../../assets/gansuJson/linxia.json');
this.mapData = [
{
name: '临夏市',
value: '1202',
},
{
name: '临夏县',
value: '396',
},
{
name: '永靖县',
value: '1125',
},
{
name: '广河县',
value: '635',
},
{
name: '和政县',
value: '586',
},
{
name: '康乐县',
value: '360',
},
{
name: '东乡族自治县',
value: '678',
},
{
name: '积石山保安族东乡族撒拉族自治县',
value: '678',
},
];
this.getArea();
} else if (data.name === '甘南藏族自治州') {
this.dataMap = require('../../assets/gansuJson/gannan.json');
this.mapData = [
{
name: '合作市',
value: '1202',
},
{
name: '夏河',
value: '396',
},
{
name: '碌曲',
value: '1125',
},
{
name: '玛曲',
value: '635',
},
{
name: '迭部',
value: '586',
},
{
name: '舟曲',
value: '360',
},
{
name: '临潭',
value: '310',
},
{
name: '卓尼县',
value: '160',
},
];
this.getArea();
}
},
// 点击返回按钮事件,如果当前是市区地图的话点击按钮就会返回到省级地图,参数就相当于是初始加载数据,如果是点击到县里面的话就要修改逻辑了,这里只有两级判断
backMap() {
this.dataMap = require('../../assets/gansuJson/gansu.json');
this.mapData = [
{
name: '兰州市',
value: '1202',
code: '1011',
},
{
name: '嘉峪关市',
value: '396',
},
{
name: '金昌市',
value: '1125',
},
{
name: '白银市',
value: '635',
},
{
name: '天水市',
value: '586',
},
{
name: '武威市',
value: '360',
},
{
name: '张掖市',
value: '231',
},
{
name: '平凉市',
value: '196',
},
{
name: '酒泉市',
value: [
{
ztya: "11",
zxya: "222",
bmya: "33"
},
{
jrzb: [
{
title: "值班领导",
name: "张三",
zw: "局长",
phone: "15294111111",
phone2: "0913-0000000"
},
{
title: "值班人员",
name: "李四",
zw: "处长",
phone: "15294111222",
phone2: "0913-0222200"
}
]
}
]
},
{
name: '庆阳市',
value: '480',
},
{
name: '定西市',
value: '680',
},
{
name: '陇南市',
value: '880',
},
{
name: '临夏回族自治州',
value: '280',
},
{
name: '甘南藏族自治州',
value: '80',
},
];
this.getArea();
},
},
};
</script>
<style>
#area-box {
width: 100%;
height: 500px;
}
</style>