echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】
2024-05-13 16:51:41
效果图：
1.点击省，跳转到河北省
2.返回，从省返回到中国地图
话不多说，直接上代码，1.复制粘贴，2.在引入对应js即可
注：全部各省地图，下载地址：**
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.echart {width: 500px;height: 500px;}</style><style>.backBtn{display: none;background: #cccccc;cursor: pointer;}.backBtn.active{display: inline-block;}</style>
</head>
<body>
<div class="backBtn" id="backBtn">返回中国地图</div>
<div class="echart" id="worldMap"></div>
<script src="../jquery.min.js" charset="utf-8"></script>
<script src="../echarts.js"></script>
<script src="china.js"></script>
<script>var mapData = [ //自己做的模拟数据 后续根据业务展示{name: '湖北', value: 88},{name: '广东', value: 24},{name: '上海', value: 5},{name: '山东', value: 15},{name: '湖南', value: 14},{name: '重庆', value: 0},{name: '四川', value: 65},{name: '新疆', value: 36},{name: '黑龙江', value: 12},{name: '西藏', value: 68},{name: '青海', value: 31},{name: '内蒙古', value: 28},{name: '陕西', value: 12},{name: '辽宁', value: 88},{name: '云南', value: 23},]// var provinceData = [ //省份公司的数据// {name: '新疆', value: 23, children: ['福田', '南山', '龙华']},// {name: '河北', value: 23, children: ['衡水', '张家口', '承德']},// ]var provinces = { //数据台湾: 'taiwan',河北: 'hebei',山西: 'shanxi',辽宁: 'liaoning',吉林: 'jilin',黑龙江: 'heilongjiang',江苏: 'jiangsu',浙江: 'zhejiang',安徽: 'anhui',福建: 'fujian',江西: 'jiangxi',山东: 'shandong',河南: 'henan',湖北: 'hubei',湖南: 'hunan',广东: 'guangdong',海南: 'hainan',四川: 'sichuan',贵州: 'guizhou',云南: 'yunnan',陕西: 'shanxi1',甘肃: 'gansu',青海: 'qinghai',新疆: 'xinjiang',广西: 'guangxi',内蒙古: 'neimenggu',宁夏: 'ningxia',西藏: 'xizang',北京: 'beijing',天津: 'tianjin',上海: 'shanghai',重庆: 'chongqing',香港: 'xianggang',澳门: 'aomen'}var isReturnChina = false //是否显示返回中国地图function clickRoute(){alert("点击了,做其他操作!")// this.$router.push('/')}function chinaMapHidden(chinaMap) {let that = thischinaMap.off('click')//这里解决多次触发点击事件 但是还会执行2次 引用echarts地图，点击各个省份时，点击一个调用两次接口，再点击一次，调用四次接口，再点击调用八次。。。。依次叠加，问题在于，没有将地图上的点击事件清空chinaMap.on('click',async function(params){// if (params.name in that.provinces) {// let s = await import(`echarts/map/js/province/${that.provinces[params.name]}.js`);// if (s){// worldMap(params.name)// }// }if(provinces.hasOwnProperty(params.name)){// var mapName =provinces[params.name]// $.getScript('js/province/'+mapName+'.js',function(){// newFun('"Checking new script"');//这个函数是在new.js里面的，当点击click后运行这个函数// });// worldMap(mapName)newMapFu(params.name)}})}
//加载各省地图
function newMapFu(mapName){var nameEn = provinces[mapName]var js = document.createElement('script');js.src = 'js/province/'+nameEn+'.js';document.body.appendChild(js);setTimeout(function (){$('#backBtn').addClass('active');worldMap(mapName)},100)console.log(mapName)
}//返回中国地图
$('#backBtn').on('click',function (){$('#backBtn').removeClass('active');worldMap('china')
});function getMapJson(mapName) {var def = $.Deferred();var url = 'http://localhost:9075'+ '/projectManagement/public/echarts/map/json/province/'+mapName+'.json';$.ajax({type: 'get',url: url,data: {},dataType: 'json',success: function (data) {if (data.status == 'STATUS_SUCCESS') {def.resolve(data);def.promise(data);} else if (data.status == 'STATUS_FAIL') {def.resolve(data);def.promise(data);} else {def.resolve(data);def.promise(data);}},error: function (data) {def.reject(data);def.promise(data);}});return def;};
</script>
<script>//初始化echartsvar myChartMap;// worldMap('hebei'); //世界地图worldMap('china'); //世界地图function worldMap(mapName) {// myChart.showLoading({// text: 'loading',// color: '#c23531',// textColor: '#000',// maskColor: 'rgba(255, 255, 255, 0.2)',// zlevel: 0,// });// myChart.hideLoading();/*标准必要专利数量排行-echart*/var echartNameDataArr = []; //X轴企业名称var echartNumDataArr = []; //Y轴标准数量// ajaxListByPatent().then(function (declEntityList) {// var i = 0;// repeat();// function repeat() {// if (i < declEntityList.length) {// //企业没名字的移除// ajaxcountByDeclEntity(declEntityList[i].name).then(function (declEntityNum) {// echartNameDataArr.push(declEntityList[i].name);// echartNumDataArr.push(declEntityNum);// i++;// repeat();// });// } else {// console.log('Standard', echartNameDataArr, echartNumDataArr);// echartSetOption();//构建标准分布 echarts// }// }echartSetOption(mapName);//构建标准分布 echarts//标准必要专利数量排行 echartsfunction echartSetOption(mapName) {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('worldMap'));if (myChart != null && myChart != "" && myChart != undefined) {myChart.dispose();}// getMapJson('hebei').then(function (data){// echarts.registerMap('hebei', data);// myChart = echarts.init(document.getElementById('worldMap'));// myChart.setOption({// series: [{// type: 'map',// map: 'hebei'// }]// });myChart = echarts.init(document.getElementById('worldMap'));var mapDataList = [{name: "南海诸岛",value: 0},{name: '北京',value: 54}];var visualMapParams = {min: mapDataList[0].value,max: mapDataList.slice(-1)[0].value,}var option = {tooltip: {show: true,triggerOn: "click",formatter: function(e, t, n) {// return .5 == e.value ? e.name + "：有疑似病例" : e.seriesName + "<br />" + e.name + "：" + e.valueconsole.log('dsadsads',e)var name = e.namevar toolipData = []// chinaMapHidden(name);// newMapFu(name);provinceData.forEach(item=>{if(name == item.name){// toolipData = item.children}})var htmlStr = ''toolipData.forEach(item=>{htmlStr += `<li class="list-li" name="${item}"><div οnclick="clickRoute()" >${item}</div></li>`})return `<div class="list-wrap"><div class="list-title">${name}</div><ul class="list-ul">${htmlStr}</ul></div>`}},//工具：数据、下载、还原toolbox: {show: true,orient: 'vertical',// left: '',right: '20px',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},visualMap: {min: 0,max: 1000,left: 26,bottom: 40,showLabel: !0,text: ["高", "低"],calculable: true,//可筛选show: false},geo: {map: mapName,//"china"// map: '河北',//"china"// center: [104.114129, 37.550339],//当前视角的中心点zoom: 1, //当前视角的缩放比例roam: true, //是否开启平游或缩放scaleLimit: { //滚轮缩放的极限控制min: 1,max: 2},// top: 80,label: {normal: {show: !0,fontSize: "14",color: "rgba(0,0,0,0.7)"}},itemStyle: {normal: {//shadowBlur: 50,//shadowColor: 'rgba(0, 0, 0, 0.2)',borderColor: "rgba(0, 0, 0, 0.2)"},emphasis: {areaColor: "#f2d5ad",shadowOffsetX: 0,shadowOffsetY: 0,borderWidth: 0}}},series: [{name: "确诊病例",type: "map",geoIndex: 0,// data: mapDataListdata: []}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);chinaMapHidden(myChart);//监听自适应大小window.addEventListener("resize", () => {myChart.resize();});})}};
</script>
</body>
</html>
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】相关推荐
- 地图点击省跳转到市_城市天际线导入真实世界地图教程
首先我们仅需要知道一个国外的网站,在利用谷歌地图下载你想要的城市的高度图 也就是相当于地形灰度图 下面教程开始 详细教程可以访问论坛:www.51pcyx.cn 第一步:打开网站:http://ter ...
- echarts+vue中国地图,点击进入省级地图
先上效果图 再说思路 第一步: 生成中国地图 第二步: 定义点击事件根据反参生成省级地图所需要的参数 第三步: 将省级地图所需要的参数传入渲染方法重新渲染 最后说步骤 准备 1 npm echarts ...
- vue echarts 中国地图省级联动+散点图（各省json文件及china.js）
最近用echarts 做个散点图,且省级联动,效果图如下: 1.安装echarts cnpm install echarts --save 2.引入echarts.中国地图及省份地图json impo ...
- 微信小程序内使用echart实现中国地图，点击省跳转省地图，再点击市跳转到市区详情
目的:在微信小程序内实现一张中国地图,上面要写上一些全国数据,点击省 => 省地图,并请求数据,点击市区 => 跳转到市区地图这样一个功能,具体实现效果如下: 思路: 1.首先我们要先画 ...
- echarts map 点击地图区域变色_绘制炫酷的地图，不只是pyecharts！
点击上方"数据管道",选择"置顶星标"公众号 干货福利,第一时间送达 导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现, ...
- echarts map 点击地图区域变色_绘制炫酷的地图，不只是pyecharts.map！
导读:地图可视化是一种非常直观的数据分析结果展现形式,python有很多可视化库可以实现,pyecharts就是很多python爱好者喜爱的实现地图可视化方法之一.不可否认,pyecharts绘制的地 ...
- echarts中国地图,点击其省显示其对应的市
.vue文件 echarts--各个配置项详细说明总结 <template><div><div class="china-box"><di ...
- echarts在中国地图上绘制各省指标
先看效果图: 下面看实现方法: html中主要代码 <script src="../static/js/jquery-3.3.1.min.js" ></scrip ...
- 报表中能实现中国地图钻取到各省地图吗？
地图类问题,目前 echarts 做的比较专业,设置起来还比较灵活,找一个支持 echarts 的报表工具就可以,在报表中处理数据,然后将数据注入 echarts 图用来展示,在 echarts 里可 ...
最新文章
- mac vscode 配置golang
- MongoDb Windows linux平台环境及主流编程语言驱动安装同时配置mongoDb的远程连接
- C语言处理字符串及内存操作
- 使用AOP与注解记录Java日志
- [Leetcode]第[58]题[JAVA][最后一个单词的长度][字符串]
- python做工控机_狼真的来了吗？igus用树莓派工控机打造了一条智能拖链
- Linux的概念与体系 6. Linux文本流（转载）
- MFC中 给基于CFormView的单文档添加背景图片
- 最近公共祖先 解题报告
- iOS clang: error: linker command failed with exit code 1 (use -v to see invocation)
- python 字符编码详解
- Python 读写matlab中.mat文件
- WPF调用 ECharts 显示图表
- 微信小程序合成海报_微信小程序生成海报实现方式
- MAVEN工程引入p6spy打印sql语句日志（Spring+mybatis）
- 宏碁台式计算机u盘启动,Acer宏碁台式电脑怎么通过bios设置u盘启动
- 以太坊地址和公钥_《每日一课》第九课：什么是钱包、钱包地址、私钥、公钥？...
- 读史可以使人明智，鉴以往可以知未来
- 图片自动适应表格的大小
- STM32软件模拟IIC---读写驱动AT24Cxx