场景：做大屏展示时，需要在地图上展示每个省空调安装量，并且能下钻到市级展示各个省下市的安装量。
措施：
//设置配置项 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包在文件中下载