Echarts版本是 echarts 4
有問題的小伙伴可以加群交流：475870039
研究了三天Echarts，終於實現了基於Echarts 實現地圖下鑽至縣區，加對應區域的數據展示。先看效果圖
后續更新研究的過程，建議要想使用用echarts的同學先去看官方文檔和示例，不要盲目的去搞。我前一天在弄數據添加到地圖上展示，自己在瞎搞了一天，也沒搞出過所以然來。后來去看了半天文檔，對着示例研究，終於把數據展示弄清楚了。接下來就是綁定數據就可以了，開心。
2018/3/26 更新
- 修改樣式，根據色階數值地圖塊顯示不同的顏色
- 按月份篩選數據，日期插件是原生的html5 input date
- 每個對應區域的下一級同樣按篩選月份顯示數據
- 實現右鍵返回，用到棧來實現
- 查找了 echarts 官方api文檔，
鼠標事件myChart.on('contextmenu', ()=>{})
let canvas = document.getElementsByTagName("body") canvas.oncontextmenu = function(){return false;} myCharts.on('contextmenu,function(params){ //鼠標右鍵事件，顯示右鍵返回上一級 $('#context-menu').css({ left: params.event.offsetX, top: params.event.offsetY }) })
- 去掉瀏覽器默認右鍵菜單 + echarts右鍵事件
- 點擊地圖進入下一級的時候，把當前渲染好的數據入棧
- 右鍵返回上一級，數據出棧，重新渲染 （不知道能不能實現想瀏覽器一樣，單純的返回上一個頁面，而不需要重新渲染）
添加功能：增加了圖例選擇功能，選擇不同的數據類型，展示不同的數據。
1. 一開始的思路是想在原來的地圖通通過 圖例改變事件 的api 改變地圖數據，來展示。結果，實現邏輯太復雜，自己把自己繞暈了
2. 經前輩指導，通過按鈕鏈接跳轉，copy4份地圖，數據改變就可以了，get
部分地圖下鑽代碼：
chart.on("click", function(params) { //隱藏右鍵返回菜單
$("#contextMenu").hide(); let tmpObj = {}; let d = []; if (params.name in provinces) { //二級直轄市數據渲染
if (special.indexOf(params.name) >= 0) { let postData2 = { parentid: "provinceid", value: params.data.id }; Promise.all([ajaxRequest(getCityNumberUrl, searchtime, postData2)]).then( result => { let [curMonthResult, lastMonthData] = result; let tmp = []; if (curMonthResult.errcode == 1) { getAreaNumber( params.name, curMonthResult.msg[0].cityid, searchtime ); } }, error => { console.log("請求市級數據失敗", e); } ); } //如果點擊的是34個省、市、自治區，繪制選中地區的二級地圖
$.getJSON(provinceJson + provinces[params.name] + ".json", function( data ) { echarts.registerMap(params.name, data); for (var i = 0; i < data.features.length; i++) { d.push({ name: data.features[i].properties.name }); } renderMap(params.name, d); if (params.data.id !== "undifiend") { getCityNumber(params.name, params.data.id, searchtime, data); } }); } else { //顯示縣級地圖
$.getJSON(cityJson + cityMap[params.name] + ".json", function( data ) { echarts.registerMap(params.name, data); let d = []; for (var i = 0; i < data.features.length; i++) { d.push({ name: data.features[i].properties.name }); } renderMap(params.name, d); if (params.data.cityid) { let postData3 = { parentid: "cityid", value: params.data.cityid }; Promise.all([ ajaxRequest(getAreaNumberUrl, searchtime, postData3) ]).then( result => { let [curMonthResult, lastMonthData] = result; let tmp = []; if (curMonthResult.errcode == 1) { // console.log('204', res.msg[0].cityid, res.msg[0].city)
//這里傳遞的城市名有問題“北京市”，渲染地圖的名字是“北京”，所以地圖名要用原來的名字渲染
getAreaNumber(params.name, params.data.cityid, searchtime); } }, error => { console.log("請求市級數據失敗", e); } ); } }); }
地圖下鑽demo代碼： https://github.com/touxing/echarts3-chinese-map-drill-down.git 更新（2019-05-20）上傳mock數據 更新（2019-08-12）接入本地mock數據，線上預覽地址 由於線上無法讀取目錄文件列表，只能展示第一級數據，完整數據展示課下載demo本地運行，注意看 README.md 文件
轉自：https://blog.csdn.net/example440982/article/details/79672227