中国地图分区域
描述: 公司需要將中國劃分成八個區(qū)域,華北,東北,華東,華中,華南,西南,西北,境外,鼠標(biāo)指上區(qū)域顯示每個區(qū)域庫存與供貨,先上效果圖:
?
?
<!DOCTYPE html> <html lang="zh"> <head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><meta http-equiv="X-UA-Compatible" content="ie=edge" /><title>echarts地圖合并-生成中國大區(qū)</title> </head> <body> <div id="chinaMap" style="width: 1000px;height: 500px;"></div> <script type="text/javascript" src="./jquery.min.js"></script> <script type="text/javascript" src="./echarts.min.js"></script> <script type="text/javascript">repRegionStrategy();var mergeProvinces = function(chinaJson, names, properties) {//合并大區(qū)里省份的coordinatesvar features = chinaJson.features;var polygons = [];var polygons2 = [];for(var i = 0; i < names.length; i++) {var polygonsCoordinates = [];var polygonsEncodeOffsets = [];for(var z = 0; z < names[i].length;z++){for(var j = 0; j < features.length; j++) {if(features[j].properties.name == names[i][z]) {if(features[j].geometry.coordinates[0].constructor == String){//合并coordinatesfor(var l = 0; l<features[j].geometry.coordinates.length;l++){polygonsCoordinates.push(features[j].geometry.coordinates[l]);}}else if(features[j].geometry.coordinates[0].constructor == Array){for(var k=0;k<features[j].geometry.coordinates.length;k++){for(var d=0;d<features[j].geometry.coordinates[k].length;d++){polygonsCoordinates.push(features[j].geometry.coordinates[k][d]);}}}if(features[j].geometry.encodeOffsets[0].constructor == String){//合并encodeOffsets polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets);}else if(features[j].geometry.encodeOffsets[0].constructor == Array){for(var k=0;k<features[j].geometry.encodeOffsets.length;k++){if(features[j].geometry.encodeOffsets[k][0].constructor == Array){for(var e=0;e<features[j].geometry.encodeOffsets[k].length;e++){polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k][e]);}}else{polygonsEncodeOffsets.push(features[j].geometry.encodeOffsets[k]);}}}break;}}}polygons.push(polygonsCoordinates);polygons2.push(polygonsEncodeOffsets);}// 構(gòu)建新的合并區(qū)域var features = [];for(var a = 0;a<names.length;a++){var feature = {id: features.length.toString(),type: "FeatureCollection",geometry: {type: "Polygon",coordinates: polygons[a],encodeOffsets: polygons2[a]},properties: {name: properties.name[a] || "",childNum:polygons[a].length}};if(properties.cp[a]) {feature.properties.cp = properties.cp[a];}// 將新的合并區(qū)域添加到地圖中 features.push(feature);}chinaJson.features = features;};function repRegionStrategy(){$.get('./china.json', function (chinaJson) {var params = {names: [//把各個大區(qū)的省份用二維數(shù)組分開['北京','天津','河北','山西','內(nèi)蒙古'],["黑龍江","吉林","遼寧"],['山東','江蘇','安徽','江西','浙江','福建','上海'],['河南','湖北','湖南'],['廣東','廣西','海南'],['重慶','四川','云南','西藏','貴州'],['陜西','甘肅','青海','寧夏','新疆'],['香港','澳門','臺灣']],properties: {//自定義大區(qū)的名字，要和上面的大區(qū)省份一一對應(yīng)name: ['華北','東北','華東','華中','華南','西南','西北','境外'],cp: [//經(jīng)緯度可以自己隨意定義,如'東北'等在地圖的位置[134.47,47.78],[126.32,43.50],[121.28,31.13],[114.20,30.32],[113.15,23.08],[104.04,30.39],[103.49,36.03],[103.49,56.03]]}};mergeProvinces(chinaJson, params.names, params.properties);echarts.registerMap('china', chinaJson); // 注冊地圖var pRChart = echarts.init(document.getElementById('chinaMap'));var data = [//地圖數(shù)據(jù) {"name": "東北", "value": [['庫存', '12億', '30%'], ['供貨', '1億', '10%']]}, {"name": "華北", "value": [['庫存', '22億', '30%'], ['供貨', '12億', '10%']]}, {"name": "華南", "value": [['庫存', '13億', '30%'], ['供貨', '3億', '10%']]}, {"name": "華東", "value": [['庫存', '2億', '60%'], ['供貨', '1億', '20%']]}, {"name": "華中", "value": [['庫存', '12億', '33%'], ['供貨', '5億', '10%']]}, {"name": "西南", "value": [['庫存', '22億', '30%'], ['供貨', '8億', '10%']]}, {"name": "西北", "value": [['庫存', '14億', '50%'], ['供貨', '2億', '10%']]},{"name": "境外", "value": [['庫存', '19億', '20%'], ['供貨', '1億', '10%']]}];option = {tooltip: {//鼠標(biāo)放上去提示trigger: 'item',backgroundColor: '#fff',padding: 0,textStyle:{color: '#333'},formatter: function (params) {var style = `<style>.title{background:#f1f4fc;line-height:25px;text-align:center;padding:5px 10px;}table{width:100%;text-align:center;border-collapse:collapse;}table td{border-right:1px solid #ddd;border-bottom:1px solid #ddd;padding:5px 10px;}table td:last-child{border-right:0;}</style>`var title = `<div class="title">${params.name}</div><table>`,con = '',bottom = '</table>';if(params.data) {var arr = params.data.valuefor(var i = 0; i < arr.length; i++) {con += `<tr><td>${arr[i][0]}</td><td>${arr[i][1]}</td><td>${arr[i][2]}</td></tr>`}} return style + title + con + bottom}}, series: [{name: '大區(qū)',//城市type: 'map',map: 'china',geoIndex: 1,aspectScale: 0.75, //長寬比symbolSize: 20,data: data,showLegendSymbol: true, // 存在legend時顯示 label: {normal: {show: false,textStyle: {color: '#333'}},emphasis: {//鼠標(biāo)放上去時的狀態(tài)show: false,textStyle: {color: '#333'}}},roam: false,//禁止拖拽和伸縮 itemStyle: {normal: {areaColor: '#d3dae1',borderColor: '#fff',borderWidth: 1},emphasis: {areaColor: '#3c55b7'}}}] };pRChart.setOption(option,true);});} </script> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/hesj/p/11557655.html
總結(jié)
- 上一篇： tpl文件如何导入ps？tpl文件笔刷怎
- 下一篇： 计算机基础17秋在线作业3,东师计算机应