路徑 D:\ireport365\ireport365.war\js\enduser\designer\vs-component-echarts.js 數據處理 ``` case "DrillDownChinaMap": // 數據處理 var mapStack = []; var curMap = {}; var option = component.config.chartConfig; var optionNode = component.config; var mapdata = option.series[0].data; option.series[0].data = mapdata; if(optionNode.curlMap){ loadMap1(optionNode.curlMap.mapCode, optionNode.curlMap.mapName); }else{ loadMap1('100000', 'china'); } function loadMap1(mapCode, mapName) { $.ajaxSettings.async = false; $.getJSON(contextPath + '/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) { if (data1) { // console.log(data1) echarts.registerMap(mapName, data1); option.series[0].mapType = mapName // console.log(mapName) scope.component.context.chart.setOption(option, true) curMap = { mapCode: mapCode, mapName: mapName }; // console.log(curMap) } else { alert('無法加載該地圖'); } }); } /** 綁定用戶切換地圖區域事件 cityMap對象存儲著地圖區域名稱和區域的信息(name-code) 當mapCode有值,說明可以切換到下級地圖 同時保存上級地圖的編號和名稱 */ component.context.chart.on("mapselectchanged", function (params) { if (params.dataIndex < 0) { return } // console.log(params) var name = params.batch[0].name; var mapCode = cityMap[name]; if (!mapCode) { //如果地圖無法繼續下鉆，則讓點擊的區域呈現選中狀態 alert('無此區域地圖顯示') return; } loadMap1(mapCode, name); //將上一級地圖信息壓入mapStack // console.log(curMap) mapStack.push({ mapCode: curMap.mapCode, mapName: curMap.mapName }); console.log(mapStack) }); // 動態插入div var boarddiv = '<div id = "contextMenu" style = "position: absolute;background:#000;opacity:0.8;cursor: pointer;border-radius: 2px;padding:8px 30px;display:none;color: #fff;font-size:14px;">返回上一級</div>'; $('#'+component.id).append(boarddiv); /** 綁定鼠標右鍵事件，并加載上一級地圖 */ component.context.chart.on('contextmenu', function(params) { $('#'+component.id+'>#contextMenu').css({ left: params.event.offsetX, top: params.event.offsetY }).show(); console.log(mapStack) }); function truncate(arr) { var m = arr.slice(0); m.splice(m.length-1,1); return m; } var maparr = truncate(mapStack) // 返回按鈕的點擊事件 $('#'+component.id).on('click','#contextMenu', function () { console.log(maparr) var map = maparr.pop(); console.log(map) $(this).hide(); if (!maparr.length && !map) { // alert('已經到達最上一級地圖了'); if(optionNode.curlMap){ loadMap1(optionNode.curlMap.mapCode, optionNode.curlMap.mapName); }else{ loadMap1('100000', 'china'); } return; }else{ // alert('1212') loadMap1(map.mapCode, map.mapName); } // scope.component.context.chart.setOption(option, true) }); break ``` 分享頁面 ``` case "DrillDownChinaMap": // 數據處理 var mapStack = []; var curMap = {}; var option = component.config.chartConfig; var optionNode = component.config; var mapdata = option.series[0].data; option.series[0].data = mapdata; if(optionNode.curlMap){ loadMap1(optionNode.curlMap.mapCode, optionNode.curlMap.mapName); }else{ loadMap1('100000', 'china'); } function loadMap1(mapCode, mapName) { $.ajaxSettings.async = false; $.getJSON(contextPath + '/cdn/1.0/assets-map-json/main-city/' + mapCode + '.json', function(data1) { if (data1) { console.log(data1) echarts.registerMap(mapName, data1); option.series[0].mapType = mapName // console.log(mapName) scope.component.context.chart.setOption(option, true) curMap = { mapCode: mapCode, mapName: mapName }; // console.log(curMap) } else { alert('無法加載該地圖'); } }); } /** 綁定用戶切換地圖區域事件 cityMap對象存儲著地圖區域名稱和區域的信息(name-code) 當mapCode有值,說明可以切換到下級地圖 同時保存上級地圖的編號和名稱 */ component.context.chart.on("mapselectchanged", function (params) { if (params.dataIndex < 0) { return } // console.log(params) var name = params.batch[0].name; var mapCode = cityMap[name]; if (!mapCode) { //如果地圖無法繼續下鉆，則讓點擊的區域呈現選中狀態 alert('無此區域地圖顯示') return; } loadMap1(mapCode, name); //將上一級地圖信息壓入mapStack // console.log(curMap) mapStack.push({ mapCode: curMap.mapCode, mapName: curMap.mapName }); console.log(mapStack) }); // 動態插入div var boarddiv = '<div id = "contextMenu" style = "position: absolute;background:#000;opacity:0.8;cursor: pointer;border-radius: 2px;padding:8px 30px;display:none;color: #fff;font-size:14px;">返回上一級</div>'; $('#'+component.id).append(boarddiv); /** 綁定鼠標右鍵事件，并加載上一級地圖 */ component.context.chart.on('contextmenu', function(params) { $('#'+component.id+'>#contextMenu').css({ left: params.event.offsetX, top: params.event.offsetY }).show(); console.log(mapStack) }); // 返回按鈕的點擊事件 $('#'+component.id).on('click','#contextMenu', function () { console.log(mapStack) var map = mapStack.pop(); // // var map = mapStack[0]; console.log(map) $(this).hide(); if (!mapStack.length && !map) { // alert('已經到達最上一級地圖了'); if(optionNode.curlMap){ loadMap1(optionNode.curlMap.mapCode, optionNode.curlMap.mapName); }else{ loadMap1('100000', 'china'); } return; }else{ // alert('1212') loadMap1(map.mapCode, map.mapName); } // scope.component.context.chart.setOption(option, true) }); break; ```