<!DOCTYPE html>
<!-- saved from url=(0045)https://demo.demohuo.top/jquery/40/4064/demo/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=EDGE">
<title>ECharts China Map</title>
<style>
#china-map {
width: 1000px;
height: 1000px;
margin: auto;
}
#box{
display:none;
background-color: goldenrod;
width: 180px;
height: 30px;
}
#box-title{
display:block;
}
</style>
<script type="text/javascript" src="./ECharts China Map_files/jquery.min.js.下载"></script>
<script type="text/javascript" src="./ECharts China Map_files/echarts.min.js.下载"></script>
<script type="text/javascript" src="./ECharts China Map_files/china.js.下载"></script>
<script type="text/javascript" src="./ECharts China Map_files/sichuan.js.下载" id="$sichuanJS"></script><script type="text/javascript" src="./ECharts China Map_files/sichuan.js.下载" id="$sichuanJS"></script><script type="text/javascript" src="./ECharts China Map_files/henan.js.下载" id="$henanJS"></script><script type="text/javascript" src="./ECharts China Map_files/henan.js.下载" id="$henanJS"></script><script type="text/javascript" src="./ECharts China Map_files/shanxi1.js.下载" id="$shanxi1JS"></script><script type="text/javascript" src="./ECharts China Map_files/shanxi1.js.下载" id="$shanxi1JS"></script></head>
<body style="">
<button id="back">返回全国</button>
<div id="china-map" style="-webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1586768428012"><div style="position: relative; overflow: hidden; width: 1000px; height: 1000px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;"><canvas data-zr-dom-id="zr_0" width="1000" height="1000" style="position: absolute; left: 0px; top: 0px; width: 1000px; height: 1000px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div style="position: absolute; display: block; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px "Microsoft YaHei"; padding: 5px; left: 385px; top: 466px; pointer-events: none;">西藏<br>0 (p / km2)</div></div>
<script>
var myChart = echarts.init(document.getElementById('china-map'));
var oBack = document.getElementById("back");
var provinces = ['shanghai', 'hebei', 'shanxi', 'neimenggu', 'liaoning', 'jilin', 'heilongjiang', 'jiangsu', 'zhejiang', 'anhui', 'fujian', 'jiangxi', 'shandong', 'henan', 'hubei', 'hunan', 'guangdong', 'guangxi', 'hainan', 'sichuan', 'guizhou', 'yunnan', 'xizang', 'shanxi1', 'gansu', 'qinghai', 'ningxia', 'xinjiang', 'beijing', 'tianjin', 'chongqing', 'xianggang', 'aomen'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门'];
var seriesData = [{
name: '北京',
value: 100
}, {
name: '天津',
value: 0
}, {
name: '上海',
value: 60
}, {
name: '重庆',
value: 0
}, {
name: '河北',
value: 60
}, {
name: '河南',
value: 60
}, {
name: '云南',
value: 0
}, {
name: '辽宁',
value: 0
}, {
name: '黑龙江',
value: 0
}, {
name: '湖南',
value: 60
}, {
name: '安徽',
value: 0
}, {
name: '山东',
value: 60
}, {
name: '新疆',
value: 0
}, {
name: '江苏',
value: 0
}, {
name: '浙江',
value: 0
}, {
name: '江西',
value: 0
}, {
name: '湖北',
value: 60
}, {
name: '广西',
value: 60
}, {
name: '甘肃',
value: 0
}, {
name: '山西',
value: 60
}, {
name: '内蒙古',
value: 0
}, {
name: '陕西',
value: 0
}, {
name: '吉林',
value: 0
}, {
name: '福建',
value: 0
}, {
name: '贵州',
value: 0
}, {
name: '广东',
value: 597
}, {
name: '青海',
value: 0
}, {
name: '西藏',
value: 0
}, {
name: '四川',
value: 60
}, {
name: '宁夏',
value: 0
}, {
name: '海南',
value: 60
}, {
name: '台湾',
value: 0
}, {
name: '香港',
value: 0
}, {
name: '澳门',
value: 0
}];
oBack.onclick = function () {
initEcharts("china", "中国");
};
initEcharts("china", "中国");
// 初始化echarts
function initEcharts(pName, Chinese_) {
var tmpSeriesData = pName === "china" ? seriesData : [];
var option = {
title: {
text: Chinese_ || pName,
left: 'center'
},
tooltip: {
trigger: 'item',
formatter: '{b}<br/>{c} (p / km2)'
},
series: [
{
name: Chinese_ || pName,
type: 'map',
mapType: pName,
roam: false,//是否开启鼠标缩放和平移漫游
data: tmpSeriesData,
top: "3%",//组件距离容器的距离
zoom:1.1,
selectedMode : 'single',
label: {
normal: {
show: true,//显示省份标签
textStyle:{color:"#fbfdfe"}//省份标签字体颜色
},
emphasis: {//对应的鼠标悬浮效果
show: true,
textStyle:{color:"#323232"}
}
},
itemStyle: {
normal: {
borderWidth: .5,//区域边框宽度
borderColor: '#0550c3',//区域边框颜色
areaColor:"#4ea397",//区域颜色
},
emphasis: {
borderWidth: .5,
borderColor: '#4b0082',
areaColor:"#ece39e",
}
},
}
]
};
myChart.setOption(option);
myChart.off("click");
if (pName === "china") { // 全国时，添加click 进入省级
myChart.on('click', function (param) {
console.log(param.name);
// 遍历取到provincesText 中的下标 去拿到对应的省js
for (var i = 0; i < provincesText.length; i++) {
if (param.name === provincesText[i]) {
//显示对应省份的方法
showProvince(provinces[i], provincesText[i]);
break;
}
}
if (param.componentType === 'series') {
var provinceName =param.name;
$('#box').css('display','block');
$("#box-title").html(provinceName);
}
});
} else { // 省份，添加双击 回退到全国
myChart.on("dblclick", function () {
initEcharts("china", "中国");
});
}
}
// 展示对应的省
function showProvince(pName, Chinese_) {
//这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
loadBdScript('$' + pName + 'JS', './ECharts China Map_files/' + pName + '.js', functi
全国地图_echarts_百度_源码
版权申诉
162 浏览量
2021-10-01
01:27:56
上传
评论
收藏 2.16MB ZIP 举报
全国地图.zip （37个子文件） 
ECharts China Map.html 9KB
ECharts China Map_files 
jiangsu.js 24KB ningxia.js 14KB jquery.min.js 91KB guizhou.js 33KB xinjiang.js 87KB hubei.js 39KB tianjin.js 12KB henan.js 37KB shanxi.js 24KB shanxi1.js 32KB hebei.js 40KB liaoning.js 50KB beijing.js 22KB chongqing.js 48KB anhui.js 32KB guangxi.js 47KB guangdong.js 72KB zhejiang.js 51KB hunan.js 46KB
ECharts China Map_files.zip 1.08MB china.js 61KB yunnan.js 62KB gansu.js 48KB hainan.js 30KB qinghai.js 44KB xizang.js 51KB neimenggu.js 58KB taiwan.js 30KB sichuan.js 84KB echarts.min.js 727KB heilongjiang.js 78KB shandong.js 51KB jiangxi.js 33KB jilin.js 42KB shanghai.js 13KB fujian.js 44KB资源评论
爱牛仕
- 粉丝: 96
- 资源: 4716
