<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<script type="text/javascript" src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts.min.js"></script>
<script type="text/javascript" src="./js/echarts-gl.min.js"></script>
<script type="text/javascript" src="./js/china.js"></script>
<script type="text/javascript" src="./js/test.js"></script>
<style>
#china-map {
width: 900px;
height: 600px;
margin: auto;
}
#box{
display:none;
background-color: goldenrod;
width: 180px;
height: 30px;
}
#box-title{
display:block;
}
</style>
</head>
<body>
<div id="china-map"></div>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
var loadedProvince =[];
function initEcharts(pname,data){
myChart.setOption({
title:{
text:'中国地图',
left:'center'
},
tooltip:{
trigger:'item',
formatter:'{b} <br/>{c} '
},
series: [{
type: 'map3D',
map: pname,
data:data,
selectedMode : 'single', //multiple
zoom:1.2,
label: {
show: true,//显示省份标签
color:'#fbfdfe', //省份标签字体颜色
textStyle:{
fontSize:'12'
}
},
itemStyle:{
color:'#B1D0EC', //图形的颜色
borderColor:'#dadfde', //边线的颜色
borderWidth:1
},
emphasis: {//对应的鼠标悬浮效果
borderWidth: 2,
borderColor: '#4b0082',
areaColor:"#ece39e",
}
}]
});
myChart.off('click');
//如果是中国地图, 进入到省的地图
if(pname=='china') {
myChart.on('click',function(param){
console.log(param.name);
if(!param.name) {
return;
}
// var provinceName = seriesData.filter(function(option,index){
// return option.name == param.name
// })[0].alias;
var provinceName = param.data.alias;
loadRelativeProvince(provinceName,function(data){
//渲染省地图
initEcharts(param.name,seriesHebeiData);
});
})
} else {
myChart.on('click',function(param){
initEcharts('china',seriesData);
})
}
}
initEcharts('china',seriesData);
function loadRelativeProvince(provinceVal,callback){
//思路一: 找到所有的script的src,去判断是否已经加载过
//思路二: 加一个全部局变量,每加载一个省的js,线判断是否在这个全局变量里,
//在就停止加载,不在就继续后面的加载,并把加载的省追加到这个全局变量对象里
if(loadedProvince.indexOf(provinceVal)!=-1) {
callback && callback(provinceVal);
return;
}
//怎么加载js文件
var script = document.createElement('script');
script.type='text/javascript';
script.src = './js/province/'+provinceVal+'.js';
if(script.readyState){
//ie10以下有用,包括IE0
script.onreadystatechange = function(){
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
loadedProvince.push(provinceVal);
callback && callback(provinceVal);
}
}
} else{
script.onload = function(){
loadedProvince.push(provinceVal);
callback && callback(provinceVal);
}
}
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
</body>
</html>
JS 第三方工具封装经典案例(中国地图)
猜你喜欢
转载自blog.csdn.net/weixin_41181778/article/details/104066506
今日推荐
周排行