echarts，map国地图点击各省，跳转展示，从省返回到国地图china.js
唐策
帮助1人
效果图：
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="https://blog.csdn.net/qq_29132907/article/jquery.min.js" charset="utf-8"></script>
<script src="https://blog.csdn.net/qq_29132907/article/echarts.js"></script>
<script src="https://blog.csdn.net/qq_29132907/article/details/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 = this
chinaMap.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 = 'https://blog.csdn.net/qq_29132907/article/details/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>
//初始化echarts
var 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
//标准必要专利数量排行 echarts
function 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.value
console.log('dsadsads',e)
var name = e.name
var 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: mapDataList
data: []
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
chinaMapHidden(myChart);
//监听自适应大小
window.addEventListener("resize", () => {
myChart.resize();
});
})
}
};
</script>
</body>
</html>
这篇好文章是转载于：学新通技术网
- 版权申明： 本站部分内容来自互联网，仅供学习及演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，请提供相关证据及您的身份证明，我们将在收到邮件后48小时内删除。
- 本站站名： 学新通技术网
- 本文地址： /boutique/detail/tanhiahfic
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
Android 11 保存文件到外部存储，并分享文件
Luke 10-12 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22
