<!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="echarts2.js"></script>
<script src="js/china.js"></script>
<!-- <script src="js/province/hebei.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 = '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><
echarts，map中国地图点击各省，跳转展示，从省返回到中国地图【china.js】 3.各省地图，代码打包
需积分: 24 84 浏览量
2022-04-18
15:30:26
上传
评论 4
收藏 3.3MB ZIP 举报
chinaJumpCity.zip （78个子文件） 
chinaJumpCity 
chinaJumpCity.html 10KB
jquery.min.js 93KB echarts2.js 2.85MB json world.json 987KB province yunnan.json 61KB xinjiang.json 86KB shanxi1.json 30KB guangdong.json 70KB henan.json 35KB jiangsu.json 23KB shanxi.json 22KB fujian.json 42KB xianggang.json 12KB zhejiang.json 50KB tianjin.json 10KB hunan.json 44KB shanghai.json 12KB chongqing.json 47KB beijing.json 21KB guangxi.json 46KB hubei.json 38KB taiwan.json 31KB aomen.json 2KB ningxia.json 12KB hebei.json 38KB qinghai.json 43KB jiangxi.json 31KB liaoning.json 49KB gansu.json 46KB neimenggu.json 56KB hainan.json 28KB xizang.json 670KB anhui.json 30KB guizhou.json 31KB heilongjiang.json 77KB shandong.json 49KB sichuan.json 82KB jilin.json 40KB china.json 60KB china-cities.json 1.15MB china-contour.json 9KB js province jiangsu.js 23KB ningxia.js 13KB guizhou.js 32KB xinjiang.js 86KB hubei.js 38KB tianjin.js 11KB henan.js 36KB shanxi.js 23KB shanxi1.js 31KB hebei.js 39KB liaoning.js 49KB beijing.js 22KB chongqing.js 47KB anhui.js 31KB guangxi.js 46KB guangdong.js 71KB zhejiang.js 50KB hunan.js 45KB yunnan.js 62KB xianggang.js 13KB gansu.js 47KB hainan.js 29KB qinghai.js 44KB xizang.js 50KB neimenggu.js 57KB taiwan.js 29KB sichuan.js 83KB heilongjiang.js 77KB shandong.js 50KB jiangxi.js 32KB aomen.js 3KB jilin.js 41KB shanghai.js 12KB fujian.js 43KB china.js 60KB china-contour.js 10KB world.js 144KB
评论0