<!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 显示中国地图以及省份
共41个文件
js:39个
html:2个
1 下载量 176 浏览量
2024-09-10
18:03:45
上传
评论
收藏 1.2MB ZIP 举报
温馨提示
echarts 显示中国地图以及省份
资源推荐
资源详情
资源评论
收起资源包目录
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
共 41 条
- 1
资源评论
顽石九变
- 粉丝: 6214
- 资源: 11
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功