vue使用E-Charts製作專題圖（廣西省爲例）---第一篇
寫博客是爲了做筆記
先給大家看一下效果圖：
“專題圖”顧名思義就是地圖的每一部分根據一定的標準，展現出不一樣顏色，使人們更直觀的看出這個標準的變化的圖。這個地圖的顏色是因爲從後臺獲取的數據的問題展示出現在這種顏色的。接下來，上乾貨：
第一步：獲取e-charts以及在main.js中對其進行配置，詳情見我上一篇文章或e-charts官網
第二步：創建容器
<template>
<div>
<!-- 我是地圖 -->
<div id='theMap' ></div>
</div>
</template>
第三步：封裝製作專題圖方法
//array是鼠標放到專題圖上展示的數據，是一個[[{},{}...],[]....地圖長度]這樣數據結構的數組
//title是專題圖名稱（雖然在上面的效果圖中沒有展示出來）
//adCode是我用來獲取json的一個參數，如果小夥伴直接從本地獲取，那就不用
map(array,title,adCode) {
// 基於準備好的dom，初始化echarts實例
var mapData=[]
var myChart = echarts.init(document.getElementById("theMap"));
//這裏是仿axios獲取地圖的json數據，因爲我做的項目需要很多的json,所以我這樣寫的，
//如果不需要很多的同學可以忽略這一步，直接var datas=獲取的json數據
this.$axios({
//第三個參數在這裏用到
url:'../../../static/json/'+adCode+'.json',
}).then(res=>{
//喏，獲取到的json賦值給了datas
var datas = res.data;
//給這個json的地圖取個名字，我的叫廣西
echarts.registerMap('廣西', datas);
mapData=datas
var nameColor = " rgb(55, 75, 113)";
var name_fontFamily = "宋體";
var name_fontSize = 60;
var data = [];
var geoCoordMap = {};
var toolTipData = [];
//獲取地圖數據
myChart.showLoading();
var mapF = mapData.features;
myChart.hideLoading();
mapF.forEach(function(v,k) {
// 地區名稱
var name = v.properties.name;
var adcode=v.properties.adcode;
// 地區經緯度
geoCoordMap[name] = v.properties.center;
data.push({
name: name,
//因爲專題圖json數據中的adCode跟傳進來的array中的adCode不一致，所以我在這裏處理一下
adCode:adcode+"000000",
//地圖顏色根據這個value變化,可以換成array中的數據
value: Math.round(Math.random() * 100 + 10)
});
//鼠標放上去顯示的內容
toolTipData.push({
name: name,
value:array[k]
});
});
//-------------------------------------------↓
//這一堆是最後鋪圖層時用的，控制漣漪圓圈，還有氣泡大小等
var max = 480,
min = 9; // todo
var maxSize4Pin = 50,
minSize4Pin = 20;
var convertData = function(data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
//-------------------------------------------↑
//地圖的正式配置數據
var option = {};
option = {
tooltip: {
trigger: "item",
//鼠標放到地圖上的顯示項
formatter: function(params) {
if (typeof params.value[2] == "undefined") {
var toolTiphtml = "";
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ":<br>";
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml +=
toolTipData[i].value[j].name +
":" +
toolTipData[i].value[j].value +
"<br>";
}
}
}
return toolTiphtml;
}
else {
var toolTiphtml = "";
for (var i = 0; i < toolTipData.length; i++) {
if (params.name == toolTipData[i].name) {
toolTiphtml += toolTipData[i].name + ":<br>";
for (var j = 0; j < toolTipData[i].value.length; j++) {
toolTiphtml +=
toolTipData[i].value[j].name +
":" +
toolTipData[i].value[j].value +
"<br>";
}
}
}
// console.log(toolTiphtml);
// console.log(convertData(data))
return toolTiphtml;
}
}
},
//喏，第二個參數title用在這裏了
title:{
text:title+'專題圖',
textStyle:{
fontSize:17,
color:'#aaa'
},
top:80,
left:90,
subtext:'我是副標題',
subtextStyle:{
fontSize:15
}
},
legend: {
orient: "vertical",
y: "bottom",
x: "right",
data: ["credit_pm2.5"],
textStyle: {
color: "#fff"
}
},
//圖2左下角類似於刻度尺一樣的東西
visualMap: {
show: true,
min: 0,
max: 100,
bottom:150,
left:90,
itemWidth:35,
text: ["高", "低"], // 文本，默認爲數值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: ["#99FFFF","#5599FF"] // 藍綠
}
},
//工具按鈕組
toolbox: {
show: false,
orient: "vertical",
left: "right",
top: "center",
feature: {
dataView: {
readOnly: false
},
restore: {},
saveAsImage: {}
}
},
//通過json中的數據將地圖畫出來，沒有點，只有線，面（就像一個畫布）
geo: {
show: true,
//這裏廣西就是之前咱們自己取的名字
map: '廣西',
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: "#031525",
borderColor: "#097bba"
},
emphasis: {
areaColor: "#2B91B7"
}
}
},
//series這個數組，就是一層一層的往地圖上鋪點
series: [
//第一層點：所有城市中心點
{
name: "散點",
type: "scatter",
coordinateSystem: "geo",
zoom:'1.3',
//通過哪些數據來鋪點
data: convertData(data),
//用來控制鋪上去的點的大小
symbolSize: function(val) {
// return val[2] / 10;
return 2;
},
//點對應的字的樣式
label: {
normal: {
formatter: "{b}",
position: "right",
show: true,
textStyle:{
fontSize:14
}
},
emphasis: {
show: true
}
},
//點的樣式
itemStyle: {
normal: {
color:"rgba(255,255,0)",
}
}
},
{
type: "map",
// map: mapName,
map: '廣西',
zoom:'1.3',
geoIndex: 0,
name:'kkk',
aspectScale: 0.75, //長寬比
showLegendSymbol: false, // 存在legend時顯示
label: {
normal: {
show: true,
textStyle:{
fontSize:14
}
},
emphasis: {
show: true,
textStyle: {
color: "#fff"
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: "#031525",
borderColor: "#3B5077"
},
emphasis: {
areaColor: "#2B91B7"
}
},
animation: false,
data: data
},
{
name: "問題 點",
type: "scatter",
coordinateSystem: "geo",
symbol: "pin", //氣泡
data: convertData(data),
//用來控制鋪上去的點的大小
symbolSize: function(val,params) {
// var a = (maxSize4Pin - minSize4Pin) / (max - min);
// var b = minSize4Pin - a * min;
// b = maxSize4Pin - a * max;
if(params.data.pro[2]>0&¶ms.data.pro[2]<=20){
return params.data.pro[2]+10;
}else if(params.data.pro[2]>20){
return params.data.pro[2];
}
},
label: {
normal: {
formatter: "{b}",
position: "right",
show: false,
textStyle:{
fontSize:14
},
},
emphasis: {
show: false
}
},
itemStyle: {
normal: {
color: "rgba(255,0,0)" //標誌顏色
}
},
zlevel: 6,
// data: convertData(data)
},
{
name: "正在巡河",
type: "effectScatter",
coordinateSystem: "geo",
zoom:'1.3',
//通過哪些數據來鋪點
data: convertData(
data.sort(function(a, b) {
return b.value - a.value;
}).slice(0, 5)
),
symbolSize: function(val,params) {
if(val[2]>0&&val[2]<=20){
return val[2]+10;
}else if(val[2]>20){
return val[2]/10;
}
},
showEffectOn: "render",
rippleEffect: {
brushType: "stroke"
},
hoverAnimation: true,
label: {
normal: {
formatter: "{b}",
position: "right",
show: false,
textStyle:{
fontSize:14
}
}
},
itemStyle: {
normal: {
color: "rgba(0,255,0,0.8)",
shadowBlur: 10,
shadowColor: "green"
}
},
zlevel: 1
}
]
}
// 使用剛指定的配置項和數據顯示圖表。
myChart.clear();
myChart.setOption(option,true);
var that=this
myChart.off('click');
//專題圖點擊事件
myChart.on('click', function (params) {
console.log(params)
});
window.addEventListener("resize", function() {
myChart.resize();
});
}
//axios的catch
}).catch(err=>{
this.$message({
message: '暫無相關數據！',
type: 'warning'
});
})
},
第四步:獲取專題圖數據array，調用map方法
//獲取專題圖
getMap(adcode) {
this.$axios({
url:this.$apiUrl.themap.getAllByAd,
method:"get",
params:{
adCode:adcode
}
}).then(res=>{
if(res.data.code==2000){
this.map(res.data.data,'我是標題',adcode)
}
}).catch(err=>{})
},
mounted() {
//傳入從cookie中獲取的adCode
this.getMap(this.$adCode());//專題圖
},
大部分內容都寫在了代碼片段裏，有需要的可以好好看一下，下一篇內容記錄專題圖點擊跳轉到對應的專題圖的問題。例：點擊廣西省專題圖中的南寧市，跳轉到南寧市的專題圖。
有些寫的不太清楚，請大家勿噴，一起交流，一起學習！