本文介绍如何使用ECharts渲染不同类型的中国地图，包括全国大区、全国城市及特定区域的地图，并详细解释了设置地图样式、触发点击事件及地图钻取等功能。
/**
* @description 渲染地图
* @chart {object} 地图json数据
*/
window.updateMapChart = function(chart) {
if(typeof mapChart !='undefined'){
mapChart.dispose();
}
if(chart.areaStyle){
$("#mapResult").find(".c1").remove();
$("#mapResult").append("<div class='c1' style='position: relative'><div id='map-chart' style='position: absolute'></div></div>");
$("#"+mapchartId).css(eval('('+chart.areaStyle+')'));
$("#"+mapchartId).parent().css({position:'relative'})
}else{
$("#mapResult").find(".c1").remove();
$("#mapResult").append("<div class='c1' id='map-chart'></div>");
}
mapChart = window.echarts.init(document.getElementById(mapchartId));
if(chart.mapType=="MAP_CONTRY_AREA"){//出全国地图
cityJson = {};
renderAllContryAreaMap(chart);
}else if(chart.mapType=="MAP_CONTRY_CITY"){//出全国城市地图
renderAllContryCityMap(chart);
}else if(chart.mapType=="MAP_AREA"){//出大区地图
cityJson = {};
renderAreaMap(chart);
}
};
/**
* @description 渲染全国大区地图
* @json {object} 图标数据
*/
window.renderAllContryAreaMap = function(json) {
option = {
tooltip : {
trigger: 'item'
},
series : []
};
//alert(JSON.stringify(json.bigAreaList));
for(var i=0;i<json.bigAreaList.length;i++){
var sery = json.bigAreaList[i];
var data = [];
for(var j=0;j<sery.data.length;j++){
var d = {};
var itemStyle={
normal: {
borderColor:'#'+sery.color,
color: '#'+sery.color,
label: {
show: true,
formatter :sery.data[j].itemStyle.normal.label.formatter,
textStyle:{color:'#000000',fontFamily:'微软雅黑'}
}
},
emphasis:{label:{show:true},color: '#dbbf8e'} };
d.name=sery.data[j].name;
if(sery.data[j].value){
d.value=sery.data[j].value;
}
d.itemStyle = itemStyle;
d.tooltip = {
trigger: 'item',
formatter: sery.name+'<br/>'+sery.tooltip
};
data.push(d);
}
option.series.push({
name: sery.name,
type: 'map',
mapType: 'china',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:false}},
emphasis:{label:{show:true},color: '#dbbf8e'}
},
data:data
});
};
var seriesObj = {
name: '隐藏南海诸岛',
type: 'map',
mapType: 'china',
hoverable: false,
itemStyle:{
normal:{
color: '#ffffff',
borderColor:'#ffffff',
label: {
show: false,
textStyle:{color:'#000000',fontFamily:'微软雅黑'}
}
},
emphasis:{label:{show:true}}
},
data:[
{name: '南海诸岛',value: Math.round(Math.random()*1000)}
]
}
option.series.push(seriesObj);
var seriesObj = {
name: '台湾',
type: 'map',
mapType: 'china',
hoverable: false,
itemStyle:{
normal:{
color: '#cdecff',
borderColor:'#cdecff',
label: {
show: false,
textStyle:{color:'#000000',fontFamily:'微软雅黑'}
}
},
emphasis:{label:{show:false}}
},
data:[
{name: '台湾',tooltip: {
show:false,
trigger: 'item'
}}
]
}
option.series.push(seriesObj);
mapChart.clear();
mapChart.setOption(option);
//注册点击事件
mapChart.on(window.echarts.config.EVENT.MAP_SELECTED, function(param){
var selected = param.selected;
//console.log(selected);
var name;
for(var i in selected){
if(selected[i]){
name=i;
}
}
if($.trim(name)=='台湾' || $.trim(name)=='南海诸岛'){
return;
}
$("#provinceName").val(selected.name);
out:for(var i=0;i<json.bigAreaList.length;i++){
var sery = json.bigAreaList[i];
for(var j=0;j<sery.data.length;j++){
var ce = sery.data[j];
if(ce.name==name){
$("#areaId").val(sery.id);
$("#areaName").val(sery.name);
break out;
}
}
}
mapDrill(0,$("#areaId").val(),$("#areaName").val());
});
}
/**
* @description 渲染全国大区地图
* @json {object} 图标数据
*/
window.renderAllContryAreaMap = function(json) {
option = {
tooltip : {
trigger: 'item'
},
series : []
};
//alert(JSON.stringify(json.bigAreaList));
for(var i=0;i<json.bigAreaList.length;i++){
var sery = json.bigAreaList[i];
var data = [];
for(var j=0;j<sery.data.length;j++){
var d = {};
var itemStyle={
normal: {
borderColor:'#'+sery.color,
color: '#'+sery.color,
label: {
show: true,
formatter :sery.data[j].itemStyle.normal.label.formatter,
textStyle:{color:'#000000',fontFamily:'微软雅黑'}
}
},
emphasis:{label:{show:true},color: '#dbbf8e'} };
d.name=sery.data[j].name;
if(sery.data[j].value){
d.value=sery.data[j].value;
}
d.itemStyle = itemStyle;
d.tooltip = {
trigger: 'item',
formatter: sery.name+'<br/>'+sery.tooltip
};
data.push(d);
}
option.series.push({
name: sery.name,
type: 'map',
mapType: 'china',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:false}},
emphasis:{label:{show:true},color: '#dbbf8e'}
},
data:data
});
};
var seriesObj = {
name: '隐藏南海诸岛',
type: 'map',
mapType: 'china',
hoverable: false,
itemStyle:{
normal:{
color: '#ffffff',
borderColor:'#ffffff',
label: {
show: false,
textStyle:{color:'#000000',fontFamily:'微软雅黑'}
}
},
emphasis:{label:{show:true}}
},
data:[
{name: '南海诸岛',value: Math.round(Math.random()*1000)}
]
}
option.series.push(seriesObj);
var seriesObj = {
name: '台湾',
type: 'map',
mapType: 'china',
hoverable: false,
itemStyle:{
normal:{
color: '#cdecff',
borderColor:'#cdecff',
label: {
show: false,
textStyle:{color:'#000000',fontFamily:'微软雅黑'}
}
},
emphasis:{label:{show:false}}
},
data:[
{name: '台湾',tooltip: {
show:false,
trigger: 'item'
}}
]
}
option.series.push(seriesObj);
mapChart.clear();
mapChart.setOption(option);
//注册点击事件
mapChart.on(window.echarts.config.EVENT.MAP_SELECTED, function(param){
var selected = param.selected;
//console.log(selected);
var name;
for(var i in selected){
if(selected[i]){
name=i;
}
}
if($.trim(name)=='台湾' || $.trim(name)=='南海诸岛'){
return;
}
$("#provinceName").val(selected.name);
out:for(var i=0;i<json.bigAreaList.length;i++){
var sery = json.bigAreaList[i];
for(var j=0;j<sery.data.length;j++){
var ce = sery.data[j];
if(ce.name==name){
$("#areaId").val(sery.id);
$("#areaName").val(sery.name);
break out;
}
}
}
mapDrill(0,$("#areaId").val(),$("#areaName").val());
});
}
/**
* @description 渲染全国城市地图
* @json {object} 图标数据
*/
window.renderAllContryCityMap= function(json) {
cityJson = {};
cityJson = json;
};
controller.drawOtherCity=function(data){
//console.log("json=="+JSON.stringify(json));
if(cityJson){
var markPointData = [],selectedData=[];
var beginIdx=0,endIdx=10;
if(data){
beginIdx=data.beginIdx;
endIdx=data.endIdx;
}
for(var i=beginIdx;i<endIdx && i<cityJson.bigAreaList.length;i++){
var sery = cityJson.bigAreaList[i];
markPointData.push({name:sery.name,value:'',tooltip:{trigger: 'item',formatter: sery.name+'<br/>'+sery.tooltip}});
if(sery.my){
selectedData.push(
{
name:sery.name,
value:sery.name,
tooltip:{trigger: 'item',formatter: sery.name+'<br/>'+sery.tooltip}
});
}
}
//console.log("markPointData="+JSON.stringify(markPointData));
option = {
tooltip : {
trigger: 'item'
},
series : [{
name: '销量',
type: 'map',
mapType: 'china',
hoverable: false,
itemStyle:{
normal:{
color: '#'+cityJson.color,
label: {
show: false,
textStyle:{color:'#000000',fontFamily:'微软雅黑',fontSize:10}
}
},
emphasis:{label:{show:true}}
},
data:[],
markPoint : {
symbolSize: 5, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
itemStyle: {
normal: {
color:'lightgreen',
borderColor: '#87cefa',
borderWidth: 1, // 标注边线线宽，单位px，默认为1
label: {
show: true,
formatter:function(v1,v2,v3) {return "\r\n\r\n"+v2;},
textStyle:{color:"#000000",fontFamily:'微软雅黑',fontSize:10}
}
},
emphasis: {
borderColor: '#1e90ff',
borderWidth: 5,
label: {
show: false
}
}
},
data : markPointData
},
geoCoord: cityJson.geoCoord
}
]
};
if(selectedData.length >0){
option.series.push({
name: 'selectedCity',
type: 'map',
mapType: 'china',
hoverable: false,
data:[],
markPoint : {
symbolSize: 5, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
itemStyle: {
normal: {
color:'lightgreen',
borderColor: '#1e90ff',
borderWidth: 5,
label: {
show: true,
formatter:function(v1,v2,v3) {return "\r\n\r\n"+v2;},
textStyle:{color:"#000000",fontFamily:'微软雅黑',fontSize:10}
}
}
},
data : selectedData
}
})
}
var seriesObj = {
name: '隐藏南海诸岛',
type: 'map',
mapType: 'china',
hoverable: false,
itemStyle:{
normal:{
color: '#ffffff',
borderColor:'#ffffff',
label: {
show: false,
textStyle:{color:'#000000',fontFamily:'微软雅黑'}
}
},
emphasis:{label:{show:true}}
},
data:[
{name: '南海诸岛',value: Math.round(Math.random()*1000)}
]
}
option.series.push(seriesObj);
mapChart.clear();
mapChart.setOption(option);
//注册点击事件
mapChart.on(window.echarts.config.EVENT.CLICK, function(param){
//console.log(param.name);
if(param.name){
for(var i=0;i<cityJson.bigAreaList.length;i++){
var sery = cityJson.bigAreaList[i];
if(sery.name==param.name){
$("#cityId").val(sery.id);
$("#cityName").val(sery.name);
mapDrill(2,$("#cityId").val(),$("#cityName").val());
break;
}
}
}
});
}
}
/**
* @description 渲染大区地图
* @json {object} 图标数据
*/
window.renderAreaMap= function(json) {
var markPointData = [],seriesData=[],selectedData=[];
for(var i=0;i<json.bigAreaList.length;i++){
var sery = json.bigAreaList[i];
if(sery.my){
markPointData.push({
name:sery.name,
tooltip:{
trigger: 'item',
formatter: sery.name+'<br/>'+sery.tooltip
},
itemStyle: {
normal: {
color:'lightgreen',
borderColor: '#1e90ff',
borderWidth: 5,
label: {
show: false
}
}
}
});
}else{
markPointData.push({name:sery.name,tooltip:{trigger: 'item',formatter: sery.name+'<br/>'+sery.tooltip}});
}
}
for(var i=0;i<json.provinceList.length;i++){
var sery = json.provinceList[i];
seriesData.push({
name:sery.name,
itemStyle:{
normal:{
color:'#'+json.color,
borderColor:'#'+json.color,
label:{show:true,
formatter :sery.itemStyle.normal.label.formatter
}
}
}
});
}
//console.log("markPointData="+JSON.stringify(markPointData));
option = {
tooltip : {
trigger: 'item'
},
series : [{
name: '销量',
type: 'map',
mapType: 'china',
hoverable: false,
itemStyle:{
normal:{
color: '#ffffff',
borderColor:'#ffffff',
label: {
show: false,
textStyle:{color:'#000000',fontFamily:'微软雅黑'}
}
},
emphasis:{label:{show:true}}
},
data:seriesData,
markPoint : {
symbolSize: 5, // 标注大小，半宽（半径）参数，当图形为方向或菱形则总宽度为symbolSize * 2
itemStyle: {
normal: {
color:'lightgreen',
borderColor: '#87cefa',
borderWidth: 1, // 标注边线线宽，单位px，默认为1
label: {
show: false
}
},
emphasis: {
borderColor: '#1e90ff',
borderWidth: 5,
label: {
show: false
}
}
},
data : markPointData
},
geoCoord: json.geoCoord
}
]
};
mapChart.clear();
mapChart.setOption(option);
//console.log("option="+JSON.stringify(option));
//注册点击事件
mapChart.on(window.echarts.config.EVENT.CLICK, function(param){
if(param.name){
for(var i=0;i<json.bigAreaList.length;i++){
var sery = json.bigAreaList[i];
if(sery.name==param.name){
console.log("sery.id="+sery.id);
console.log("sery.name="+sery.name);
$("#cityId").val(sery.id);
$("#cityName").val(sery.name);
mapDrill(2,$("#cityId").val(),$("#cityName").val());
break;
}
}
}
});
};
扫一扫
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
