借鉴了 昨晚小楼又东风了 兄弟的代码 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: '