摘要:實現(xiàn)省與中國地圖之間的切換數(shù)據(jù)可視化這東西到處都需要使用或早或晚這東西都要接觸到自然地圖和可視化結(jié)合在一起也是早晚的需求雖然地圖之間的切換只是一個很小的功能但說不定什么時候就要用到現(xiàn)在看一看里面的坑也是好的效果差不多就是這樣點擊省切換到省
echarts實現(xiàn)省與中國地圖之間的切換
數(shù)據(jù)可視化這東西到處都需要使用,或早或晚echats這東西都要接觸到,自然地圖和可視化結(jié)合在一起也是早晚的需求,雖然地圖之間的切換只是一個很小的功能,但說不定什么時候就要用到,現(xiàn)在看一看里面的坑也是好的!效果差不多就是這樣
點擊省 -> 切換到省 -> 再點切換到中國地圖
代碼// console.log("start") import echarts from "echarts" import china from "echarts/map/js/china" // import sichuan from "echarts/map/js/province/sichuan" // import anhui from "echarts/map/js/province/anhui" //定義全國省份的數(shù)組 let provinces = ["shanghai", "hebei","shanxi","neimenggu","liaoning","jilin","heilongjiang","jiangsu","zhejiang","anhui","fujian","jiangxi","shandong","henan","hubei","hunan","guangdong","guangxi","hainan","sichuan","guizhou","yunnan","xizang","shanxi1","gansu","qinghai","ningxia","xinjiang", "beijing", "tianjin", "chongqing", "xianggang", "aomen", "taiwan"] let provincesText = ["上海", "河北", "山西", "內(nèi)蒙古", "遼寧", "吉林","黑龍江", "江蘇", "浙江", "安徽", "福建", "江西", "山東","河南", "湖北", "湖南", "廣東", "廣西", "海南", "四川", "貴州", "云南", "西藏", "陜西", "甘肅", "青海", "寧夏", "新疆", "北京", "天津", "重慶", "香港", "澳門", "臺灣"] // 初始化echarts let map = echarts.init(document.getElementById("map")) // console.log(map) // 定義初始加載的地圖區(qū)域,中國地圖 let selected = "china" // 定義加載地圖的方法 // 參數(shù)為要顯示地圖區(qū)域的名字 let loadMap = (param) => { map.setOption({ geo: { // map: "china" | "四川" // 必須要先引入了對應(yīng)地圖的js文件或者json文件,在這一步的時候,echarts會自動將對應(yīng)的JS文件注入,地圖才會顯示. map: param } }) } // 第一次加載地圖 loadMap(selected) // 判斷當(dāng)前要加載的地圖是不是省? let isProvince = (name) => { return provincesText.some((province) => { return province === name }) } // 定義方法加載某個省的地圖文件 let loadScriptMap = (name, callback) => { // 獲取這個省的拼音名字 name = "四川" => pinyinName = "sichuan" let pinyinName = provinces[provincesText.indexOf(name)] console.log(pinyinName) // 引入這個對應(yīng)的地圖JS,如果是在項目中要打包,請將這些文件提取出來,放在靜態(tài)資源中 // build的時候這些文件不會被打包,無可加載資源地圖是不會顯示的!?。?! let currentMap = require(`echarts/map/js/province/${pinyinName}`) callback(name) } // 監(jiān)聽地圖點擊事件 map.on("click", (ev) => { // 如果點擊的是一個省,那就切換到這個省的地圖 if (isProvince(ev.name)) { selected = ev.name console.log(selected) // 從外部加載這個省的地圖文件 loadScriptMap(ev.name, loadMap) } else { // 否則切換中國地圖 selected = "china" loadMap(selected) } })坑
1.要渲染地圖,需要地圖對應(yīng)的js或json文件,在echart包里面,要顯示省的地圖的話也需要相對應(yīng)的sichuan.js,并不是一個china.js就可以搞定的!
2.要顯示中國地圖需要map: "china",這是很明顯的暗示,那要顯示某個省的地圖按道理就該這樣寫 map: "sichuan",然而這樣就錯了,你必須要這樣 map: "四川",你需要寫漢字
最后要是有朋友想要參考一下github
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/102869.html
摘要:最終自定義事件封裝在上面的鏈接中看到,不僅應(yīng)用層頁面的按鈕可以切換地圖維度,直接點擊地圖里的中國區(qū)域也能切換地圖,同時又能通知到應(yīng)用層頁面的按鈕改變狀態(tài)。 前言 很早以前寫過一篇用RequireJS包裝AjaxChart,當(dāng)時用Highcharts做圖表,在其上封裝了一層ajax,最后只是簡單套用了一下requireJS。由于當(dāng)時自己才接觸模塊化,理解層面還太淺,后來經(jīng)過其他項目的磨練...
摘要:需求展示西安市各區(qū)縣的地圖,點擊各區(qū)縣下鉆到各鄉(xiāng)鎮(zhèn)街道,只能內(nèi)網(wǎng)環(huán)境使用,不可用通過百度高德地圖來實現(xiàn)。利用展示自定義的地圖關(guān)于具體如何導(dǎo)入格式數(shù)據(jù)到的方法,可以參考官方示例。 需求 展示西安市各區(qū)縣的地圖,點擊各區(qū)縣下鉆到各鄉(xiāng)鎮(zhèn)/街道,只能內(nèi)網(wǎng)環(huán)境使用,不可用通過百度/高德地圖來實現(xiàn)。 解決 利用地圖數(shù)據(jù)生成區(qū)域的geojson 網(wǎng)絡(luò)上大部分地圖數(shù)據(jù)只是到省市,最多到區(qū)縣,再往下的數(shù)...
摘要:獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
摘要:獲取字符串中出現(xiàn)次數(shù)最多的字符。去掉字符串中的所有空格中對象數(shù)組按對象屬性排序 VUE 1、vue——解決You may use special comments to disable some warnings. Use // eslint-disable-next-line to ignore the next line. Use / eslint-disable / to ign...
閱讀 1675·2021-10-13 09:39
閱讀 2109·2021-09-07 10:20
閱讀 2691·2019-08-30 15:56
閱讀 2958·2019-08-30 15:56
閱讀 939·2019-08-30 15:55
閱讀 638·2019-08-30 15:46
閱讀 3504·2019-08-30 15:44
閱讀 2563·2019-08-30 11:15