关于echarts3地图下钻省市
最近关于echarts3弄了个地图下钻，也许是因为运气不好，开始上来需要传递到的城市是成都，结果成都地图（js）加载下来总是挤到了一起，好尴尬，各方实验查找后发现原来是js文件中，成都市地图有个县市并没有画出来，导致比例不正常。。。。要是有做成都的，需要注意下。。下面直接铺上三连跳下钻地图吧。。
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts 地图展示</title>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
</style>
<body>
<!--定义页面图表容器-->
<!-- 必须制定容器的大小（height、width） -->
<div id="maps" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
<div id="mapsProvice" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
<div id="mapsCity" style="width: 33%; height: 500px; border: 1px solid #ccc; display: inline-block;float: left;"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="echarts.min.js"></script>
<script type="text/javascript" src="mapjs/china.js"></script>
<script type="text/javascript">
function loadScript(url, callback) {
var script = document.createElement("script")
script.type = "text/javascript";
if (script.readyState) {
script.onreadystatechange = function() {
if (script.readyState == "loaded" || script.readyState == "complete") {
script.onreadystatechange = null;
callback();
}
};
} else {
script.onload = function() {
callback();
};
}
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
}
var myChartMap = echarts.init(document.getElementById('maps'));
var option = {
title: {
text: '全国态势图',
subtext: '进入省市可详细查看',
x: 'center',
textStyle: {
color: '#404a59'
}
},
legend: {
orient: 'vertical',
x: 'left',
data: ['安全状态']
},
dataRange: {
orient: 'vertical',
x: 'left',
min: 0,
max: 1000,
color: ['orange', 'yellow'],
text: ['高', '低'], // 文本，默认为数值文本
},
series: [{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '安全态势',
type: 'map',
mapType: 'china',
x: '5%',
y: 'center',
roam: false,
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: [{
name: '北京',
selected: true,
value: 100
}, {
name: '天津',
selected: false
}, {
name: '上海',
selected: false
}, {
name: '重庆',
selected: true,
value: 100
}, {
name: '河北',
selected: false
}, {
name: '河南',
selected: false
}, {
name: '云南',
selected: false
}, {
name: '辽宁',
selected: true,
value: 100
}, {
name: '黑龙江',
selected: false
}, {
name: '湖南',
selected: true,
value: 1000
}, {
name: '安徽',
selected: false
},
]
}],
animation: false
};
myChartMap.setOption(option, true); //显示国家地图
var myChartProvice = echarts.init(document.getElementById('mapsProvice'));
var myChartCity = echarts.init(document.getElementById('mapsCity'));
if (selectProvice = "undefined") {
selectProvice = "四川";
selectCity = "成都市";
var url = "mapjs/" + selectProvice + "/" + selectProvice + ".js";
loadScript(url, setOpt);
var cityurl = "mapjs/" + selectProvice + "/city/" + selectCity + ".js";
loadScript(cityurl, setOptCity);
setOpt();
setOptCity();
}
myChartMap.on('mapselectchanged', function(param) { //单击省份事件
selectProvice = param.batch[0].name;
var url = "mapjs/" + selectProvice + "/" + selectProvice + ".js";
loadScript(url, setOpt);
setOpt();
})
myChartProvice.on('mapselectchanged', function(param) {
selectCity = param.batch[0].name;
var cityurl = "mapjs/" + selectProvice + "/city/" + selectCity + ".js";
loadScript(cityurl, setOptCity);
setOptCity();
});
function setOpt() {
var option = {
title: {
text: selectProvice + '地区详情',
x: 'center',
textStyle: {
color: 'black'
}
},
dataRange: {
x: '-3000px',
y: 'bottom',
splitList: [{
start: 41,
color: 'rgba(182,132,220,0.8)'
}, {
start: 21,
end: 40,
color: 'rgba(255,108,96,0.8)'
}, {
start: 11,
end: 20,
color: 'rgba(252,179,34,0.8)'
}, {
start: 5,
end: 10,
color: 'rgba(89,172,226,0.8)'
}, {
start: 0,
end: 4,
label: '<4',
color: "rgba(120,205,81,0.8)"
},
],
//
textStyle: {
color: 'white',
},
},
roam: true,
series: [{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '安全态势',
type: 'map',
mapType: selectProvice,
x: 'center',
y: 'center',
// roam: true,
selectedMode: 'single',
itemStyle: {
normal: {
label: {
show: true
}
},
emphasis: {
label: {
show: true
}
}
},
data: ""
}],
animation: false,
}
myChartProvice.setOption(option, true);
}
function setOptCity() {
var option = {
title: {
text: selectCity + '地区详情',
x: 'center',
textStyle: {
color: 'black'
}
},
roam: true,
dataRange: {
x: '-3000px',
y: 'bottom',
splitList: [{
start: 41,
color: 'rgba(182,132,220,0.8)'
}, {
start: 21,
end: 40,
color: 'rgba(255,108,96,0.8)'
}, {
start: 11,
end: 20,
color: 'rgba(252,179,34,0.8)'
}, {
start: 5,
end: 10,
color: 'rgba(89,172,226,0.8)'
}, {
start: 0,
end: 4,
label: '<4',
color: "rgba(120,205,81,0.8)"
}, ],
textStyle: {
color: 'white',
},
},
series: [{
tooltip: {
trigger: 'item',
formatter: '{b}'
},
name: '安全态势',
type: 'map',
mapType: selectCity,
x: 'center',
y: 'center',
// roam: true,
itemStyle: {
normal: {
label: {
show: true
},
},
emphasis: {
label: {
show: true
}
}
},
selectedMode: 'single',
data: ""
}],
animation: false,
}
myChartCity.setOption(option, true);
}
</script>
</body>
</html>
地图js代码现在已经不支持下载了，要结合百度地图使用，如果有需要的同学，请重视中国领土完整，部分市县数据缺失，请注意！
展示效果请狂戳： https://wanglaowuplus.github.io/echarts-maps/
下载请走这里：（https://github.com/wanglaowuPlus/echarts-maps）！
如果此文章对你有帮助，请在github 上点亮你的小星星！！
关于echarts3地图下钻省市的更多相关文章
- Echarts Map地图下钻至县级
**准备工作:**1.首先使用vue-cli的脚手架生成vue项目. 2.然后使用npm安装echartsnpm install echarts -S 3.安装完后再mian.js中挂载到vue的实例 ...
- D3.js中国地图下钻
使用d3.js实现中国地图及中国地图下钻到省市区 在可视化开发中,地图是很重要的一个环节,很多时候需要展现的不仅是国家地图,还需要能从国家进入到省市,看到区这样的下钻过程,今天我们就来实现这个效果. ...
- 关于echarts地图下钻。
在去年十二月份,前端老大交代个任务,关于地图下钻.这里做了个简单的青岛地图下钻,初学echarts,做的不精,凑合看看吧. 第一步呢,先引入echarts等文件,这是最基本的. 第二步,到官网下载 ...
- vue 下实现 echarts 全国到省份的地图下钻
vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo
- vue+echarts可视化大屏,全国地图下钻,页面自适应
之前写过一篇关于数据大屏及地图下钻的文章 https://www.cnblogs.com/weijiutao/p/13977011.html ,但是存在诸多问题,如地图边界线及行政区划老旧,无法自适应 ...
- 一个让echarts中国地图包含省市轮廓的技巧
背景知识及应用简介 本文主要介绍一个使用ECharts地图组件的取巧方法,该技巧源于实际需求中遇到的问题,一般没有该需求的话这个技巧也是用不到的.有前端基础和以及对ECharts有了解的人基本可以读懂 ...
- echarts使用------地图生成----省市地图的生成及其他相关细节调整
为使用多种业务场景,百度echarts地图示例只有中国地图,那么在使用省市地图的时候,就需要我们使用省市的地图数据了 以下为陕西西安市的地图示例: 此页面引用echarts的js:http://ech ...
- vue + echart 实现中国地图 和 省市地图（可切换省份）
一.中国地图 1.先导入echarts,然后再main.js里引入echarts // 引入echartsimport echarts from 'echarts'Vue.prototype.$ech ...
- 使用ECharts来实现地图下钻功能（某省的市级下钻到县级）
var cityMap = { "长沙市": "430100", "株洲市": "430200", "湘潭市& ...
随机推荐
- 多层数据库应用基于Delphi DataSnap方法调用的实现（一）返回数据集
从Delphi 2009开始,DataSnap技术发生了很大的变化,并在Delphi 2010和Delphi XE的后续版本中得到了持续的改进.Delphi 2009之前的DataSnap,虽然也实现 ...
- CSS实现DIV超长截断，并显示...
DIV显示内容有时会超长,并把页面撑的很难看, 以前的做法是在JS中,或者后台判断其长度,过长就截断, 但由于中英文数字展示的宽度并不一样,截断的长度也就只能取最小值, 展示的效果也不好.利用CSS提 ...
- CCS3.3下执行优化
最近想研究一下CCS下的程序优化,之前也了解一些,现在查阅一下资料,整理一下. 当然优化有很多种,我本次先说的是执行优化方式. 首先打开我们自己的工程.工程文件若显示为黄色的,则表示此文件默认优化选项 ...
- laravel框架学习
在聊技术之前,我们首先谈谈研究生的生活现状.进入到研究生忙碌的生活中,研究生是这么一个群体,外界对研究生的爱称是"研究僧",为什么我自己会觉得会是爱称.因为研究僧说的是研究生对自己 ...
- Calendar /String /Date 转换
Calendar 转化 String Calendar calendat = Calendar.getInstance(); SimpleDateFormat sdf = new SimpleDate ...
- Linuxmint&win7
一.选择好Linux发行版,并下载ISO镜像.Linux发行版众多,然而主流的无非Linuxmint.Ubuntu.Fedora.Debian等,当然国内的Deepin也不错.小编旧文已专门就&quo ...
- Python学习之路——基础篇（1)字符串格式化
字符串格式化 Python的字符串格式化有两种方式: 百分号方式.format方式 百分号的方式相对来说比较老,而format方式则是比较先进的方式,企图替换古老的方式,目前两者并存. 百分号方式 ...
- 在table中进行内容搜索
$("tbody td").filter(":contains('" + x + "')").css('color','red').pare ...
- tfs 任务自定义项
vs 命令 cd C:\Program Files\Microsoft Visual Studio 11.0\Common7\IDE\PrivateAssemblies 导出工作项类型文件 修改xml ...
- 新博客地址： kuangbin.org
RT. 买了新域名,原来的kuangbin.net已经废了,数据已经移动到了kuangbin.org