簡述功能概要
最近有需求作一個數據可視化的功能 會具體顯示全國各地區的買家分佈狀況 javascript
鼠標放置在地圖上會顯示當前城市的分佈人數 點擊當前省份會下鑽到城市地圖 會顯示當前省市下各個城市的買家數和分佈狀況html
若是遇到沒有下一級再次點擊會進行返回到國家地圖(目前該示例圖是兩級下鑽 省>區市 )(還能夠實現點擊按鈕返回到上一級)vue
右側數據表會跟隨城市的切換而進行動態切換(無視數據的準確性) java
準備工做
首先須要全部城市地圖的json文件和一個城市行政區域劃代碼的js文件(本文件請求使用)(若有須要可跟與我聯繫) ios
獲取到當前json和js文件以後須要把json文件放置在服務器中 進行請求回去當前某個城市的json地圖文件,亦可放置在static中進行axios請求獲取,js文件放置在本地的assets中進行獲取json
準備好這兩項工做後 咱們能夠開始進行書寫代碼 生成echarts地圖圖表axios
生成地圖圖表
import cityMap from "../../../assets/map/china-main-city-map.js"; import echarts from "echarts";
首先在vue文件中引入echarts和區域代碼js文件.服務器
//中國地圖（第一級地圖）的ID、Name、Json數據 var chinaId = 100000; var chinaName = "china"; var chinaJson = null; //Echarts地圖全局變量，主要是在返回上級地圖的方法中會用到 var myChart = null; var cityId = null;
定義變量使用echarts
具體實現代碼(以及實現步驟)
<div id="mapChart" class="chart"></div>
mapChart(divid) {
this.mapData = [];
var that = this;
//chinaId 爲上邊定義的變量 值爲100000
Vue.axios({
url:
"https://gdsoft-/echart/map/" +
chinaId +
".json",
withCredentials: false,
}).then((response) => {
//進入頁面後 傳遞的參數爲全國的id 而後向json文件發起請求 找到文件名爲100000的json文件
//獲取到全國的地圖文件 渲染出來
const mapJson = response.data;
//調用數據獲取省份數據
let data = {
from: this.allStartDate,
to: this.allEndDate,
areaCode: chinaId,
};
Vue.axios({
method: "POST",
serviceId: "mall",
url: "123456789",
data,
}).then((res) => {
//這裏爲右側的table數據展現
//發起請求 獲取到全國的省市的json數據
this.mapChinaOptions = res.result;
for (var i = 0; i < mapJson.features.length; i++) {
//mapData爲定義的變量 獲取到當前因此省份地圖json文件中的省份名和區域劃代碼
this.mapData.push({
name: mapJson.features[i].properties.name,
id: mapJson.features[i].id,
value: 0,
});
}
//讓json地圖文件中的區域劃代碼和請求返回的行政編碼做比較 若是相等
// 進獲取數據進行賦值
this.mapData.forEach((item) => {
this.mapChinaOptions.forEach((item1) => {
if (item.id == item1.areaCode) {
item.value = item1.buyerCount;
}
});
});
});
//省份的json數據賦值
chinaJson = mapJson;
//生成圖表
myChart = echarts.init(document.getElementById(divid));
//把上邊的數據 都當作參數傳遞給 函數中
this.registerAndsetOption(myChart, chinaName, mapJson);
this.mapChartOption.series[0].data = this.mapData;
//這裏爲當點擊某個省份或城市的時候的點擊事件
myChart.on("click", function (param) {
that.show = 0;
that.mapData2 = [];
cityId = cityMap[param.name];
// 獲取到當前點擊的這個城市的 code
//若是有這個城市的id 就能夠請求json 獲取子級地圖信息
if (cityId) {
//表明有下級地圖
Vue.axios({
url:
"https://gds/echart/map/" +
cityId +
".json",
withCredentials: false,
}).then((response) => {
// 獲取到城市新的json數據
const mapJson = response.data || response;
this.getCityData = response.data || response;
let data = {
from: that.allStartDate,
to: that.allEndDate,
areaCode: cityId,
};
Vue.axios({
method: "POST",
serviceId: "mall",
url: "123456789",
data,
})
.then((res) => {
if (res.success) {
that.mapData2 = [];
this.mapCityOptions = res.result;
that.payDataList = res.result;
//從新獲取相同的數據 給 that.mapData2賦值
for (var i = 0; i < this.getCityData.features.length; i++) {
that.mapData2.push({
name: this.getCityData.features[i].properties.name,
id: this.getCityData.features[i].id,
value: 0,
});
}
that.mapData2.forEach((item) => {
this.mapCityOptions.forEach((item1) => {
if (item.id == item1.areaCode) {
item.value = item1.buyerCount;
}
});
});
//從新調用 生成新的地圖
that.registerAndsetOption(myChart, param.name, mapJson);
//把數據傳遞給圖表data
that.mapChartOption.series[0].data = that.mapData2;
} else {
Message.error("獲取買家地域分佈數據失敗,請稍後重試!");
}
})
.catch((err) => {
Message.error("獲取買家地域分佈數據失敗,請稍後重試!");
});
});
} else {
that.show = 1;
// 若是沒有就在最後一級 再次點擊返回中國地圖
//把上邊的數據 都當作參數傳遞給 函數中
that.registerAndsetOption(myChart, chinaName, mapJson);
//返回中國地圖 而且把數據從新賦值 給data 防止返回的時候 data數據爲空了
that.mapChartOption.series[0].data = that.mapData;
}
});
});
},
registerAndsetOption(myChart, name, mapJson) {
//把獲取到的城市name和 城市地圖json 用來註冊地圖
echarts.registerMap(name, mapJson);
//圖表的配置文件
this.mapChartOption = {
//鼠標放置在地圖上的顯示
tooltip: {
trigger: "item",
formatter: (p) => {
//這裏p能夠獲取到全部的數據
let val = p.value;
if (window.isNaN(val)) {
val = 0;
}
let txtCon =
"<div style='text-align:center'>" +
p.name +
":<br />地域分佈數：" +
val +
"</div>";
return txtCon;
},
},
series: [
{
type: "map",
map: name,
itemStyle: {
normal: {
//未選中樣式
//背景顏色
areaColor: "#e8effd",
//邊框顏色
borderColor: "#fbfdfe",
//邊框寬度
borderWidth: 1,
},
emphasis: {
// 選中樣式
borderWidth: 1,
//高亮顏色
areaColor: "#2062e6",
label: {
//顯示文字
show: false,
textStyle: {
//鼠標移入的字體顏色
color: "black",
},
},
},
},
data: [],
},
],
};
myChart.setOption(this.mapChartOption, true);
},
圖表寬度自適應
mounted() {
this.mapChart("mapChart");
// 自適應
window.onresize = () => {
myChart.resize();
};
},
// 監聽圖表數據的變化
watch: {
mapChartOption: {
handler(newVal, oldVal) {
if (myChart) {
// 如何有變化 就獲取最新的數據 而且渲染
myChart.setOption(newVal);
} else {
// 如何無變化 仍是老數據
myChart.setOption(oldVal);
}
},
deep: true,
},
},
具體的實現步驟能夠看代碼有步驟的具體實現和業務代碼函數
簡述具體思路
當前有一個本地的行政區域劃代碼的js文件 和 一個地圖城市信息的json文件
初始化的時候會獲取全國的區域代碼 而後和 json文件中的區域代碼匹配 而後請求匹配的json文件
會獲取到全國的地圖信息 經過 echarts渲染出來
當點擊具體省份的時候 會獲取當前省份的 區域代碼 和 json文件的區域代碼匹配 而後請求匹配的json文件
會獲取到省市的地圖信息 經過 echarts渲染出來
三級下鑽同理
若是點擊沒有下一級城市 會從新獲取全國的地圖文件 至關於返回
具體有問題能夠與我聯繫 新人一個 勿噴