场景：做大屏展示时，需要在地图上展示每个省空调安装量，并且能下钻到市级展示各个省下市的安装量。
措施：
//设置配置项
var optionMap = {
title: {
text: '',
left: 'left',
textStyle:{
color:'#999'
}
},
visualMap: {
show: true,
min: 0,
max: 0.3,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
textStyle:{
color:'#fff'
},
calculable: false,
seriesIndex: [1],
inRange: {
color: ['#131b29', '#1d1e37','#181947','#131457','#0f1068','#090977']
}
},
geo: {
show: true,
map: '',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
//roam: true,
zoom :1.2,
scaleLimit :{
min:1
},
itemStyle: {
borderColor : '#0048cc',
borderWidth :fSizeBase * 0.06,
shadowBlur:fSizeBase * 0.1,
shadowColor: '#133f8f',
color:'#070920'
},
regions: [
{
name: '南海诸岛',
value: 0,
itemStyle:
{normal:
{opacity: 0,
label: {
show: false
}
}
}
}],
//layoutCenter: ['50%', '50%'],
//layoutSize: '100%',
// left:fSizeBase*0.2,
// right:'1%',
// top:'5%',
// bottom:'1%'
},
series: [{
name: '散点',
type: 'scatter',
coordinateSystem: 'geo',
data: '',
symbolSize: function(val) {
return 1;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true,
color:'#fff'
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#fff'
}
}
},
{
type: 'map',
map: '',
//geoIndex: 0,
//aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
//roam: true,
zoom :1.2,
itemStyle: {
normal: {
//shadowBlur:1, //图形阴影的模糊大小
//shadowColor: 'rgba(0,0,0,1)', //阴影颜色
areaColor : '#0c1223', //区域颜色
borderWidth:1,
borderColor:'#000',
label : { //标签(丰台区、密云区....字体)的属性
show : true,
textStyle : {
fontSize : fSizeBase * 0.14,
}
}
},
emphasis: {
areaColor: '#060a57',
borderColor: '#010E2A'
}
},
regions: [
{
name: '南海诸岛',
value: 0,
itemStyle:
{normal:
{opacity: 0,
label: {
show: false
}
}
}
}],
//layoutCenter: ['50%', '50%'],
//layoutSize: '100%',
// left:fSizeBase*0.2,
// right:'1%',
// top:'5%',
// bottom:'1%',
animation: false,
data: ''
},
/*{
name: '地区测试数据',
type: 'map',
mapType: 'china', // 自定义扩展图表类型
// geoIndex: 0,
// aspectScale: 0.75, // 长宽比
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data: areaValue
},*/
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin', //气泡
symbolSize: function(val) {
// var a = (maxSize4Pin - minSize4Pin) / (max - min);
// var b = minSize4Pin - a * min;
// b = maxSize4Pin - a * max;
// return a * val[2] + b;
if(val[2]>1){
return fSizeBase * 0.5;
}else if(val[2] ==0.0){
return 0;
}else {
return fSizeBase * 0.3
}
},
//symbolSize:17,
label: {
normal: {
formatter: '{@[2]}',
show: true,
textStyle: {
color: '#fff',
fontSize: fSizeBase * 0.12,
}
}
},
itemStyle: {
normal: {
color: '#f75b14', //标志颜色
}
},
zlevel: 6,
data: '',
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: '',
symbolSize: function(val) {
//return val[2] / 10;
//return val[2] / 10000;
return fSizeBase * 0.2;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false,
color: '#fff'
}
},
itemStyle: {
normal: {
color: '#19a8ea',
shadowBlur: fSizeBase * 0.1,
shadowColor: '#19a8ea'
}
},
zlevel: 1
}
]
}
//渲染地图页面
function loadMap(datas){
$.get(appUrl+'/statics/echarts/json/'+areaName+'.json',function(geoJson){
echarts.registerMap(areaName,geoJson);
if($.type(geoJson) === "string"){
geoJson=JSON.parse(geoJson);
}
var mapData = geoJson.features.map(function(item){
return {
name: item.properties.name,
value: item.properties.childNum,
cp: item.properties.cp,
}
});
var data=[];
var total_install=0;
var max_install=0;
for(var i=0;i<datas.length;i++){
if(areaName!="china"){
//optionMap.title.text="安装总量：千套";
data.push({
name:datas[i].CITY_NAME,
value:numberDispose4(datas[i].INSTALL_QTY),//按照万套计算
code:datas[i].CITY_CODE,
});
total_install+=datas[i].INSTALL_QTY;
}else {
//optionMap.title.text="安装总量：万套";
data.push({
name:datas[i].PROVINCE_NAME,
value:numberDispose3(datas[i].INSTALL_QTY),//按照万套计算
code:datas[i].PROVINCE_CODE,
});
total_install+=datas[i].INSTALL_QTY;
}
}
if(areaName!="china"){
optionMap.title.text="安装总量："+numberDispose4(total_install)+"千套";
max_install=data[0].value;
}else {
optionMap.title.text="安装总量："+numberDispose3(total_install)+"万套";
max_install=data[0].value;
}
var convertData = function (areaValue) {
var res = [];
for (var i = 0; i < areaValue.length; i++) {
// var geoCoord = geoCoordMap[data[i].name];
mapData.forEach(function(v) {
if(areaValue[i].name && v.name.substring(0,2) == areaValue[i].name.substring(0,2)){
res.push({
name: areaValue[i].name,
value: v.cp.concat(areaValue[i].value),
code:areaValue[i].code
});
}
});
}
return res;
};
//userOption = ismpflow.getOption();//返回包含用户操作的option
optionMap.geo.map=areaName;
optionMap.series[0].data=convertData(data);
optionMap.visualMap.max=max_install;
optionMap.series[1].map=areaName;
optionMap.series[1].data=data;
optionMap.series[2].data=convertData(data);
optionMap.series[3].data= convertData(data.sort(function(a, b) {return b.value - a.value;}).slice(0, 5));
if(areaName!='china'){
optionMap.series[3].symbolSize=function(){return 0;}
}else {
optionMap.series[3].symbolSize=function(){return fSizeBase * 0.2;}
}
myChart.clear();//清空ECharts
myChart.hideLoading();
myChart.setOption(optionMap);
myChart.off('click');
//点击事件
myChart.on('click', function (result) {
var code=result.data.code?result.data.code:"";
if(areaName!='china'){
cityCode=code;
}else {
areaName=code.substring(0,2);
}
stopReset();
clear_install();
initCharts();
sendAjax();
$(".chongzhi").show();
})
});
}
json包在文件中下载