一、简介
除了是一个地图之外，我们也可以使用多地图进行地市、区县联动数据统计。需求如下：展示整改广东省的地图，并显示统计信息，当点击某一个地市的时候，就显示该地市的地图，并统计该地市区县的数据信息。
二、示例
相关echarts配置见上一篇 Echarts 之二——地市联动数据统计 。
相关代码如下：
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
<title>Echarts 地市、区县联动数据统计</title>
<meta name="decorator" content="default" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<script src="${ctx}/static/jquery/jquery-1.8.3.min.js"></script>
<script src="${ctx}/static/echart/echarts.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:600px ; width: 850px; margin: 0 auto;"></div>
<script type="text/javascript">
var cityMap = {
"广州市": "440100",
"韶关市": "440200",
"深圳市": "440300",
"珠海市": "440400",
"汕头市": "440500",
"佛山市": "440600",
"江门市": "440700",
"湛江市": "440800",
"茂名市": "440900",
"肇庆市": "441200",
"惠州市": "441300",
"梅州市": "441400",
"汕尾市": "441500",
"河源市": "441600",
"阳江市": "441700",
"清远市": "441800",
"东莞市": "441900",
"中山市": "442000",
"潮州市": "445100",
"揭阳市": "445200",
"云浮市": "445300"
}; // 路径配置
require.config({
paths: {
echarts: ${ctx}/static/echart'
}
}); // 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱状图就加载bar模块，按需加载
],
function(ec) {
var myChart = ec.init(document.getElementById('main'));
option = {
tooltip: { trigger: 'item' },
series: [{
tooltip: {
trigger: 'item',
formatter: '{b} {c}'
},
name: '选择器',
type: 'map',
mapType: '广东',
mapLocation: {
x: 'left',
y: 'top',
width: '30%'
},
roam: true,
selectedMode: 'single',
itemStyle: {
emphasis: { label: { show: true } } , normal : {borderWidth : 1, borderColor : '#999999' , label : { show : true}},
},
data: [
{name: '清远市',value: Math.round(Math.random()*1000)},
{name: '韶关市',value: Math.round(Math.random()*1000)},
{name: '湛江市',value: Math.round(Math.random()*1000)},
{name: '梅州市',value: Math.round(Math.random()*1000)},
{name: '河源市',value: Math.round(Math.random()*1000)},
{name: '肇庆市',value: Math.round(Math.random()*1000)},
{name: '惠州市',value: Math.round(Math.random()*1000)},
{name: '茂名市',value: Math.round(Math.random()*1000)},
{name: '江门市',value: Math.round(Math.random()*1000)},
{name: '阳江市',value: Math.round(Math.random()*1000)},
{name: '云浮市',value: Math.round(Math.random()*1000)},
{name: '广州市',value: Math.round(Math.random()*1000)},
{name: '汕尾市',value: Math.round(Math.random()*1000)},
{name: '揭阳市',value: Math.round(Math.random()*1000)},
{name: '珠海市',value: Math.round(Math.random()*1000)},
{name: '佛山市',value: Math.round(Math.random()*1000)},
{name: '潮州市',value: Math.round(Math.random()*1000)},
{name: '汕头市',value: Math.round(Math.random()*1000)},
{name: '深圳市',value: Math.round(Math.random()*1000)},
{name: '东莞市',value: Math.round(Math.random()*1000)},
{name: '中山市',value: Math.round(Math.random()*1000)}
]
}],
animation: true
}; var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.MAP_SELECTED, function(param) {//选择地市的时候，显示地市详情
var selected = param.selected;
var selectedProvince;
var name;
for (var i = 0, l = option.series[0].data.length; i < l; i++) {
name = option.series[0].data[i].name;
option.series[0].data[i].selected = selected[name];
if (selected[name]) {
selectedProvince = name;
}
}
if (typeof selectedProvince == 'undefined') {
option.series.splice(1);
option.legend = null;
option.dataRange = null;
myChart.setOption(option, true);
return;
}
option.series[1] = {
name: '模拟数据',
type: 'map',
mapType: selectedProvince,
itemStyle: {
emphasis: { label: { show: true } }
},
mapLocation: { x: '35%' },
roam: true,
data: [
{name: '清远市',value: Math.round(Math.random()*1000)},
{name: '韶关市',value: Math.round(Math.random()*1000)},
{name: '湛江市',value: Math.round(Math.random()*1000)},
{name: '梅州市',value: Math.round(Math.random()*1000)},
{name: '河源市',value: Math.round(Math.random()*1000)},
{name: '肇庆市',value: Math.round(Math.random()*1000)},
{name: '惠州市',value: Math.round(Math.random()*1000)},
{name: '茂名市',value: Math.round(Math.random()*1000)},
{name: '江门市',value: Math.round(Math.random()*1000)},
{name: '阳江市',value: Math.round(Math.random()*1000)},
{name: '云浮市',value: Math.round(Math.random()*1000)},
{name: '广州市',value: Math.round(Math.random()*1000)},
{name: '汕尾市',value: Math.round(Math.random()*1000)},
{name: '揭阳市',value: Math.round(Math.random()*1000)},
{name: '珠海市',value: Math.round(Math.random()*1000)},
{name: '佛山市',value: Math.round(Math.random()*1000)},
{name: '潮州市',value: Math.round(Math.random()*1000)},
{name: '汕头市',value: Math.round(Math.random()*1000)},
{name: '深圳市',value: Math.round(Math.random()*1000)},
{name: '东莞市',value: Math.round(Math.random()*1000)},
{name: '中山市',value: Math.round(Math.random()*1000)},
//清远
{name: "佛冈县",value: Math.round(Math.random()*1000)},
{name: "连南瑶族自治县",value: Math.round(Math.random()*1000)},
{name: "连山壮族瑶族自治县",value: Math.round(Math.random()*1000)},
{name: "连州市",value: Math.round(Math.random()*1000)},
{name: "清城区",value: Math.round(Math.random()*1000)},
{name: "清新县",value: Math.round(Math.random()*1000)},
{name: "阳山县",value: Math.round(Math.random()*1000)},
{name: "英德市",value: Math.round(Math.random()*1000)},
//韶关
{name: "乐昌市",value: Math.round(Math.random()*1000)},
{name: "南雄市",value: Math.round(Math.random()*1000)},
{name: "曲江区",value: Math.round(Math.random()*1000)},
{name: "仁化县",value: Math.round(Math.random()*1000)},
{name: "乳源瑶族自治县",value: Math.round(Math.random()*1000)},
{name: "始兴县",value: Math.round(Math.random()*1000)},
{name: "翁源县",value: Math.round(Math.random()*1000)},
{name: "武江区",value: Math.round(Math.random()*1000)},
{name: "新丰县",value: Math.round(Math.random()*1000)},
{name: "浈江区",value: Math.round(Math.random()*1000)},
//湛江
{name: "赤坎区",value: Math.round(Math.random()*1000)},
{name: "雷州市",value: Math.round(Math.random()*1000)},
{name: "廉江市",value: Math.round(Math.random()*1000)},
{name: "麻章区",value: Math.round(Math.random()*1000)},
{name: "坡头区",value: Math.round(Math.random()*1000)},
{name: "遂溪县",value: Math.round(Math.random()*1000)},
{name: "吴川市",value: Math.round(Math.random()*1000)},
{name: "霞山区",value: Math.round(Math.random()*1000)},
{name: "徐闻县",value: Math.round(Math.random()*1000)},
//河源
{name: "紫金县",value: Math.round(Math.random()*1000)},
{name: "东源县",value: Math.round(Math.random()*1000)},
{name: "和平县",value: Math.round(Math.random()*1000)},
{name: "连平县",value: Math.round(Math.random()*1000)},
{name: "龙川县",value: Math.round(Math.random()*1000)},
{name: "源城区",value: Math.round(Math.random()*1000)},
//肇庆
{name: "德庆县",value: Math.round(Math.random()*1000)},
{name: "鼎湖区",value: Math.round(Math.random()*1000)},
{name: "端州区",value: Math.round(Math.random()*1000)},
{name: "封开县",value: Math.round(Math.random()*1000)},
{name: "高要市",value: Math.round(Math.random()*1000)},
{name: "广宁县",value: Math.round(Math.random()*1000)},
{name: "怀集县",value: Math.round(Math.random()*1000)},
{name: "四会市",value: Math.round(Math.random()*1000)},
//惠州
{name: "博罗县",value: Math.round(Math.random()*1000)},
{name: "博罗县",value: Math.round(Math.random()*1000)},
{name: "惠城区",value: Math.round(Math.random()*1000)},
{name: "惠东县",value: Math.round(Math.random()*1000)},
{name: "惠阳区",value: Math.round(Math.random()*1000)},
{name: "龙门县",value: Math.round(Math.random()*1000)},
//茂名市
{name: "电白县",value: Math.round(Math.random()*1000)},
{name: "高州市",value: Math.round(Math.random()*1000)},
{name: "化州市",value: Math.round(Math.random()*1000)},
{name: "茂港区",value: Math.round(Math.random()*1000)},
{name: "茂南区",value: Math.round(Math.random()*1000)},
{name: "信宜市",value: Math.round(Math.random()*1000)},
//江门
{name: "江海区",value: Math.round(Math.random()*1000)},
{name: "蓬江区",value: Math.round(Math.random()*1000)},
{name: "台山市",value: Math.round(Math.random()*1000)},
{name: "开平市",value: Math.round(Math.random()*1000)},
{name: "恩平市",value: Math.round(Math.random()*1000)},
{name: "鹤山市",value: Math.round(Math.random()*1000)},
{name: "新会区",value: Math.round(Math.random()*1000)},
//阳江市
{name: "阳春市",value: Math.round(Math.random()*1000)},
{name: "阳东县",value: Math.round(Math.random()*1000)},
{name: "江城区",value: Math.round(Math.random()*1000)},
{name: "阳西县",value: Math.round(Math.random()*1000)},
//云浮市
{name: "罗定市",value: Math.round(Math.random()*1000)},
{name: "新兴县",value: Math.round(Math.random()*1000)},
{name: "郁南县",value: Math.round(Math.random()*1000)},
{name: "云安县",value: Math.round(Math.random()*1000)},
{name: "云城区",value: Math.round(Math.random()*1000)},
//广州
{name: "海珠区",value: Math.round(Math.random()*1000)},
{name: "番禺区",value: Math.round(Math.random()*1000)},
{name: "白云区",value: Math.round(Math.random()*1000)},
{name: "从化市",value: Math.round(Math.random()*1000)},
{name: "花都区",value: Math.round(Math.random()*1000)},
{name: "黄埔区",value: Math.round(Math.random()*1000)},
{name: "荔湾区",value: Math.round(Math.random()*1000)},
{name: "萝岗区",value: Math.round(Math.random()*1000)},
{name: "南沙区",value: Math.round(Math.random()*1000)},
{name: "天河区",value: Math.round(Math.random()*1000)},
{name: "越秀区",value: Math.round(Math.random()*1000)},
{name: "增城市",value: Math.round(Math.random()*1000)},
//汕尾市
{name: "海丰县",value: Math.round(Math.random()*1000)},
{name: "陆丰市",value: Math.round(Math.random()*1000)},
{name: "陆河县",value: Math.round(Math.random()*1000)},
{name: "城区",value: Math.round(Math.random()*1000)},
//揭阳市
{name: "榕城区",value: Math.round(Math.random()*1000)},
{name: "惠来县",value: Math.round(Math.random()*1000)},
{name: "揭东县",value: Math.round(Math.random()*1000)},
{name: "揭西县",value: Math.round(Math.random()*1000)},
{name: "普宁市",value: Math.round(Math.random()*1000)},
//珠海
{name: "斗门区", value: Math.round(Math.random()*1000)},
{name: "金湾区", value: Math.round(Math.random()*1000)},
{name: "香洲区", value: Math.round(Math.random()*1000)},
//佛山市
{name: "高明区", value: Math.round(Math.random()*1000)},
{name: "南海区", value: Math.round(Math.random()*1000)},
{name: "三水区", value: Math.round(Math.random()*1000)},
{name: "顺德区", value: Math.round(Math.random()*1000)},
{name: "禅城区", value: Math.round(Math.random()*1000)},
//潮州市
{name: "潮安县",value: Math.round(Math.random()*1000)},
{name: "饶平县",value: Math.round(Math.random()*1000)},
{name: "湘桥区",value: Math.round(Math.random()*1000)},
//汕头市
{name: "南澳县",value: Math.round(Math.random()*1000)},
{name: "濠江区",value: Math.round(Math.random()*1000)},
{name: "金平区",value: Math.round(Math.random()*1000)},
{name: "龙湖区",value: Math.round(Math.random()*1000)},
{name: "澄海区",value: Math.round(Math.random()*1000)},
{name: "潮阳区",value: Math.round(Math.random()*1000)},
{name: "潮南区",value: Math.round(Math.random()*1000)},
//深圳市
{name: "南山区",value: Math.round(Math.random()*1000)},
{name: "盐田区",value: Math.round(Math.random()*1000)},
{name: "宝安区",value: Math.round(Math.random()*1000)},
{name: "福田区",value: Math.round(Math.random()*1000)},
{name: "龙岗区",value: Math.round(Math.random()*1000)},
{name: "罗湖区",value: Math.round(Math.random()*1000)}
//东莞市
//中山市
]
};
option.legend = {
x: 'right',
data: ['模拟数据']
};
option.dataRange = {
orient: 'horizontal',
x: 'right',
min: 0,
max: 1000,
color: ['orange', 'yellow'],
text: ['高', '低'], // 文本，默认为数值文本
splitNumber: 0
}; var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
console.log(mapGeoData)
for (var city in cityMap) {
mapType.push(city);
// 自定义扩展图表类型
mapGeoData.params[city] = {
getGeoJson: (function(c) {
var geoJsonName = cityMap[c];
return function(callback) {//请求地市地理weizhi详情数据
$.getJSON('${ctx}/static/echart/geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
} myChart.setOption(option, true);
})
// 为echarts对象加载数据
myChart.setOption(option);
}
);
</script>
</body>
效果图如下：