反饋已提交
網絡繁忙
適用場景:安裝了「FineVis資料視覺化」插件的使用者,可參考本文了解 FVS 範本的相關功能。
使用鑽取地圖時,需要使用滑鼠手動操作進行地圖鑽取和中心點轉移。
現提供一個方法,元件中輸入經緯度後點選按鈕轉移中心點,選擇區域名後點選按鈕鑽取到該區域。效果如下圖所示:
呼叫 圖表相關API 實現,API如下:
panTo(loc) //轉移位置
drillDown(areas[i]) //下鑽到區域
getLayerIndex() // 獲取當前鑽取層級,獲取的層級從0開始
drillUp(index) // 向上鑽取
注:上述API均不支援擴展圖表。
點選設計器左上角「檔案>建立視覺化看板」,建立一張空白看板,可自訂範本名稱和尺寸。如下圖所示:
點選左下角「+」按鈕,點選「內建資料集」。如下圖所示:
1)建立內建資料集 Embedded1,如下圖所示:
2)建立內建資料集 Embedded2,如下圖所示:
點選組件區「圖表」按鈕,選擇「地圖類>鑽取區域地圖」。如下圖所示:
1)選中鑽取地圖,點選右側屬性面板「內容>型別」,地圖邊框選擇「中國」,其餘設定可自行選擇。如下圖所示:
2)點選「資料>資料」,選擇「各層級分別指定」,第 1 層綁定 Embedded1 的區域資料,第 2 層綁定 Embedded2 的市級資料。如下圖所示:
點選組件區「文字」按鈕,選擇「標題」,共新增五個標題組件。如下圖所示:
分別將其內容設定為經度、緯度、下鑽取區域、中心點行動、根據區域向下鑽。如下圖所示:
1)點選組件區「元件」按鈕,新增兩個正文框和一個下拉框。如下圖所示:
2)最終頁面布置如下圖所示:
選中標題中心點行動,點選右側屬性面板「交互>新增點選事件」,新增一個 JavaScript 型別的點選事件,輸入 JavaScript 代碼如下:
var chart=duchamp.getWidgetByName("鑽取區域地圖1_頁面1");var jingdu=duchamp.getWidgetByName("正文框1_頁面1").getValue(); var weidu=duchamp.getWidgetByName("正文框2_頁面1").getValue(); var loc=[weidu*1,jingdu*1];chart.panTo(loc);
具體步驟如下圖所示:
其餘標題的代碼如下:
根據區域向下鑽:根據指定區域向下鑽取
var chart =duchamp.getWidgetByName("鑽取區域地圖1_頁面1");//獲取圖表var quyu = duchamp.getWidgetByName("下拉框1_頁面1").getValue(); //獲取下拉框元件值if (chart.getLayerIndex() > 0) chart.drillUp(chart.getLayerIndex() - 1); //若已經下鑽,點選其他區域需傳回上一層級後再次下鑽var areas = [];chart.getSeries().forEach(ser => areas.push(...ser.points));var len = areas.length;for (var i = 0; i < len; i ) {if (areas[i].name == quyu) { chart.drillDown(areas[i]);break; } }
點選範本右上角「儲存」按鈕,再點選「預覽」,預覽後的效果如 1.2節所示。
預覽方式請參考 FVS行動端預覽 ,效果如下圖所示:
點選下載範本:FVS點擊標題轉移地圖中心點和鉆取.fvs
文 檔回 饋
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉