jquery市区数据,鼠标悬浮有自定义弹出层,点击县或区到指定链接,echarts市区地图
生成地图区域#main
<div id="main" style="height: 100%"></div>
引入echarts地图插件和南昌市区数据
<script type="text/javascript" src="js/echarts.js"></script><!-- 引用echarts 3.0版本 -->
<script type="text/javascript" src="js/nanchang.js"></script>
ECharts 地图数据在线生成工具:http://ecomfe.github.io/echarts-map-tool/
1、范围 range:江西省 南昌市 所有区县
2、是否包含子区域 subregion:是
3、是否压缩 compress:不勾选
4、地图名称 name:nanchang(拼音即可)
5、生成JS
2、是否包含子区域 subregion:是
3、是否压缩 compress:不勾选
4、地图名称 name:nanchang(拼音即可)
5、生成JS
// 基于准备好的dom,初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '江西·南昌',
link: 'http://echarts.baidu.com/',
subtext: '各区、县地图'
},
tooltip: {
trigger: 'item',
formatter: '<font style="color:#ffff00;font-size:18px;font-weight:600;">{b}</font><br>点击可跳转'
},
series: [{
name: '南昌市',
type: 'map',
mapType: 'nanchang',
selectedMode: 'single',
label: {
normal: {show: true},
emphasis: {show: true}
},
data: [
{name: '南昌县', selected: true}
]
}]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
myChart.on('click', function(params) {
var district = params.name;
var url = ['http://www.sucaihuo.com/source', 'http://www.sucaihuo.com/php', 'http://www.sucaihuo.com/templates'];
if (district) {
switch (district) {
case '南昌县':
location.href = url[0];
break;
case '进贤县':
location.href = url[1];
break;
case '新建区':
location.href = url[2];
break;
default:
break;
}
}
});
}
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791