echarts 省级地图下钻到市demo

借鉴了昨夜小楼又东风这位兄弟的代码
https://blog.csdn.net/m0_46577631/article/details/124354267?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_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>

echarts 省级地图下钻到市demo相关推荐

echarts青岛市地图下钻到区市及根据各个区市经纬度在各区市地图绘制散点图和道路线
var myChart1 = echarts.init(document.getElementById('chart-panel1')); //整个青岛地图绘制的domvar myChart2 = e ...
echarts 地图下钻到市到区
echarts的地图展示,并且带有下钻到下级市区 vue.js里面操作echarts //vue里面修改模板 <template><div id="china_map_bo ...
vue中基于echart地图功能省级地图下钻和返回、发射线、水波涟漪等功能展示
效果图展示-包含水波涟漪.发射线功能效果图点击地市.区县下钻功能 vue项目中main.js import echarts from 'echarts' import anhui from '../ ...
echarts实现地图下钻
公司的新项目需要写这样的地图,还要能两级下钻到省,下面是我写好了的样子,我今天就是复一下盘: 如何用echarts显示地图首先需要下载map的Json数据,我放到这里:mapJson 然后使用ech ...
使用Echarts实现地图下钻
#1使用Echarts实现中国地图 *1)参考文章"使用Echarts实现中国地图",完成中国地图的展示 http://blog.csdn.net/u010520912/artic ...
echarts省级地图展示(包含3D地图)
1.npm i echarts --save // main.js import * as echarts from 'echarts'; Vue.prototype.$echarts = echar ...
echarts实现地图下钻功能
很多时候我们需要通过地图进行数据的直观展示,并且展示下级省份.地市.区县的数据,这时我们就需要对地图进行下钻:(由于最近的项目使用的是贵州地图,所以文章中用贵州省进行演示!) 首先我们要实现功能点有以 ...
Echarts 切换地图下钻各省份地市
最近项目中用到静态Echarts地图,故整理一下具体的配置项请参考官网配置项. 1. 切换过程中如果有出现地图移位的现象,在setOption前先clear(清除实例)即可. 2. 点击事件里chi ...
echarts中国地图飞线图demo
因为公司要做大屏,需要用到echarts的地图功能,并且要添加飞线功能,在网上查了下资料,翻阅了一下官方文档后,终于是实现出来了直接上代码 <template><div class ...

echarts 省级地图下钻到市demo

echarts 省级地图下钻到市demo相关推荐

最新文章

热门文章