<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全国省份切换</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.min.4.9.0.js"></script>
<!-- 引入中国地图数据 -->
<script src="js/map/china.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<button id="back">返回全国</button>
<div id="main" style="width: 1100px;height:800px;"></div>
<script type="text/javascript">
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','taiwan'];
var provincesText = ['上海', '河北', '山西', '内蒙古', '辽宁', '吉林', '黑龙江', '江苏', '浙江', '安徽', '福建', '江西', '山东', '河南', '湖北', '湖南', '广东', '广西', '海南', '四川', '贵州', '云南', '西藏', '陕西', '甘肃', '青海', '宁夏', '新疆', '北京', '天津', '重庆', '香港', '澳门', '台湾'];
var oBack = document.getElementById("back");
var chart = echarts.init(document.getElementById('main'));
var seriesData = [
{name:'北京',value:45},
{name:'天津',value:54},
{name:'河北',value:247},
{name:'山西',value:2},
{name:'辽宁',value:63},
{name:'黑龙江',value:4},
{name:'上海',value:773},
{name:'江苏',value:2656},
{name:'浙江',value:2866},
{name:'安徽',value:576},
{name:'福建',value:151},
{name:'江西',value:175},
{name:'山东',value:2000},
{name:'河南',value:150},
{name:'湖北',value:214},
{name:'湖南',value:21},
{name:'广东',value:3446},
{name:'广西',value:18},
{name:'海南',value:17},
{name:'重庆',value:16},
{name:'四川',value:16},
{name:'贵州',value:8},
{name:'云南',value:1},
{name:'陕西',value:19},
{name:'甘肃',value:1},
{name:'新疆',value:37}
]
oBack.onclick = function () {
initEcharts("china", "中国");
};
initEcharts("china", "中国");
// 初始化echarts
function initEcharts(pName, Chinese_) {
var tmpSeriesData = pName === "china" ? seriesData : [];
var option = {
title: {
text: Chinese_ || pName,
top:'top',
x:'center'
},
tooltip: {
trigger: 'item', // 触发类型，'item' 表示鼠标悬浮到图形上时触发
formatter: '{b}: {c}' // 提示框内容的格式，{b} 是名称，{c} 是值
},
// dataRange
visualMap: {
show: true,
min: 0,
max: 3000,
text: ["高", "低"],
realtime: true,
calculable: true,
color: ["#28C9B7", "#E3F2D9"],
},
series:[
{
name: Chinese_ || pName,
type:'map',
map: pName,
roam: false,//是否开启鼠标缩放和平移漫游
show:true,
zoom:1.1,
selectedMode : 'single',
label: {
normal: {
show: true, // 显示省份名称或数量
formatter: function (params) {
if (pName === "china") {
// 当值为0时不显示省份名称，直接留空；否则显示省份名称
if (params.value && params.value >0){
return params.name
}
return '';
}else{
return params.name
}
},
fontSize:12,
color:'#333',
position: 'top' // 标签在地图内部
},
emphasis: {
show: true,
fontSize: '14',
fontWeight: 'bold'
}
},
tooltip: {
formatter: function (params) {
// 当值为0时不显示信息，直接留空；否则显示数量
if (params.value && params.value >0){
return params.name + ' : '+params.value
}
return params.name;
}
},
markArea:{
label:{
show:true
},
itemStyle:{
color:'blue',
},
},
itemStyle: {
normal: {
show:true,
color:'#fff',
areaColor: "#DAE3F3",
borderColor: '#fff', // 省份边界线颜色
borderWidth: 1, // 省份边界线宽度
position: 'inside' // 标签在地图内部
},
emphasis: {
areaColor: null,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: "rgba(0, 0, 0, 0.5)",
},
},
data: tmpSeriesData
}
],
};
chart.setOption(option);
chart.off("click");
if (pName === "china") { // 全国时，添加click 进入省级
chart.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 { // 省份，添加双击 回退到全国
chart.on("dblclick", function () {
initEcharts("china", "中国");
});
}
}
// 展示对应的省
function showProvince(pName, Chinese_) {
//这写省份的js都是通过在线构建工具生成的，保存在本地，需要时加载使用即可，最好不要一开始全部直接引入。
loadBdScript('$' + pName + 'JS', './js/map/province/' + pName + '.js', function () {
initEcharts(Chinese_);
});
}
// 加载对应的JS
function loadBdScript(scriptId, url, callback) {
var script = document.createElement("script");
script.type = "text/javascript";
if (script.readyState) { //IE
script.onreadystatechange = function () {
if (script.readyState === "loaded" || script.readyState === "complete") {
script.onreadystatechange = null;
callback();
}
};
} else { // Others
script.onload = function () {
callback();
};
}
script.src = url;
script.id = scriptId;
document.getElementsByTagName("head")[0].appendChild(script);
};
</script>
</body>
</html>
echarts-map.zip （41个子文件） 
js map 
china-contour.js 11KB province yunnan.js 62KB neimenggu.js 58KB shanxi.js 24KB hubei.js 39KB chongqing.js 48KB xianggang.js 13KB anhui.js 32KB hebei.js 40KB jiangxi.js 33KB shanxi1.js 32KB jiangsu.js 24KB beijing.js 22KB hunan.js 46KB gansu.js 48KB hainan.js 30KB ningxia.js 14KB qinghai.js 44KB heilongjiang.js 78KB guangdong.js 72KB aomen.js 3KB fujian.js 44KB jilin.js 42KB xinjiang.js 87KB guizhou.js 33KB guangxi.js 47KB sichuan.js 84KB henan.js 37KB xizang.js 51KB tianjin.js 14KB zhejiang.js 51KB shanghai.js 13KB shandong.js 51KB liaoning.js 50KB taiwan.js 30KB china.js 61KB world.js 144KB echarts.min.4.9.0.js 767KB jquery.min.js 94KB
map-china-provice.html 7KB map-china.html 4KB资源评论
顽石九变
- 粉丝: 5740
- 资源: 11
最新资源
- Matlab界面GUI版的车牌定位[Matlab界面GUI版].zip
- Matlab界面GUI版车牌识别系统设计实现[Matlab界面GUI版].zip
- Matlab界面GUI版车牌识别实现车牌定位[Matlab界面GUI版].zip
- 合并科室药品使用量软件的数据处理模板
- 合并科室药品使用量软件
- 易好用定时关机电脑锁专业版 2.3.2.0 是一款极具实用性的每天在特定的时间定时电脑管理软件
- 中国上市公司数据资产入表实践蓝皮书
- 【cocos creator】2.4.10，2d人物+3d背景，人物移动，透视视角
- vs2017从源码编译gdal3.3.2好的库文件x64-release版本
- 3d9e0c9cdv8442d06c39ad0f740a0731.html
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
