vue實作世界疫情地圖，點擊可以進入子地圖
- 效果展示
- 尋找資料源
- 設定代理
- 發送請求提取資料
- 提取資料
- 踩坑
- 處理資料并繪圖
- 國內疫情地圖資料處理繪制
- 海外疫情地圖資料處理繪制
- 完整代碼
- 代碼優化
點擊進入子地圖目前只實作了中國模塊
資料來源，騰訊實時疫情，中國疫情網
原本只想做中國模塊，后來想了想，做個世界的吧
使用axios和echarts，elementui的加載模塊還有按鈕，本地代理，腳手架版本4.1.1
本次不封裝，剛寫完還沒有優化，函式名和資料名也是隨便起的，大佬勿噴
npm安裝即可
效果展示
下載的照片如下
尋找資料源
找了幾家后發現中國疫情網的國內疫情資料更新的快，騰訊海外疫情也不錯
中國疫情網的資料:
這個是全國資料
這個是按照日期
設定代理
用axios請求這些資料如果出現跨域問題，就設定本地代理，在根目錄下創建vue.config.js檔案
module.exports = {
devServer: {
proxy: {
"/api": {
target: "https://www.ncovchina.com/data",
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
},
"/aki": {
target: "http://api.fanyi.baidu.com/api/trans/vip",
changeOrigin: true,
pathRewrite: {
"^/aki": ""
}
}
},
host: "0.0.0.0",
port: 8083,
clientLogLevel: "info"
}
};
api是中國疫情網資料
aki是百度翻譯介面，但是本次不用，因為百度翻譯標準版回傳的不準，用的愛翻譯的谷歌翻譯
發送請求提取資料
提取資料
axios.post(/api/getDisease.html)
獲得資料
國內疫情資料獲取并提取
this.isLoading = true;
axios.post(`/api/getDisease.html`).then(res => {
let data = JSON.parse(res.data.data);
console.log(data);
let dss = data.areaTree[0].children;
this.datas = dss;
this.chinaTotal = data.chinaTotal.confirm;
this.chinaAdd = data.chinaAdd.confirm;
this.chinaNow = data.chinaTotal.nowConfirm;
this.lastTime = data.lastUpdateTime;
this.isLoading = false;
});
分別提取了新增，總確診，現存確診
在繪制中國疫情地圖時需要
axios
.post(
“https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist”
)
獲取海外疫情這里獲取了185個國家的資料
海外疫情資料獲取并提取
this.isLoading = true;
axios
.post(
"https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist"
)
.then(res => {
let data = res.data.data;
let names = [];
data.forEach(item => {
names.push(item.name);
});
this.worldData = data;
this.test(names).then(res => {
console.log(res.data.dst);
let ss = res.data.dst;
console.log(ss);
let namess = ('"' + ss.replace(/, /g, '","') + '"').split(",");
this.worldNames = namess;
this.setEc(this.check);
this.isLoading = false;
});
});
test函式封裝了愛翻譯的谷歌翻譯,setEc是繪制地圖函式
test(content) {
return axios.post(
"http://api.aifanyi.net/google.php",
`content=${content}&from=zh-CN&fromtxt=中文&to=英文&totxt=英語`
);
},
為什么要這樣提取資料，因為echarts地圖資料是英文匹配，直接翻譯即可
namess為提取翻譯后的國家陣列賦值給worldName
worldData為海外疫情資料
names.push是提取國家名以便于翻譯
踩坑
百度翻譯，騰訊翻譯，有道翻譯會導致翻譯不準資料減少，給185個國家名字，回傳了174或者多點
Push會改變原格式，所有我們先push字串再把字串賦值給地圖資料，見下面
處理資料并繪圖
國內疫情地圖資料處理繪制
let min = 0;
let max = 100;
let title = " 地圖";//地圖示題(總，現存，新增)
let data = [];//疫情資料
let names = [];//提取省級名字
let values = [];//提取城市疫情資料
this.check = check;//獲取選擇(總，現存，新增)
if (check === 0) {
title = "國內現存確診地圖";
this.datas.forEach((item, index) => {
names.push(item.name);
values.push(item.total.confirm - item.total.dead - item.total.heal);
data.push({ name: names[index], value: values[index] });
});
min = 0;
max = 100;
}
if (check === 1) {
title = "國內總確診地圖";
this.datas.forEach((item, index) => {
names.push(item.name);
values.push(item.total.confirm);
data.push({ name: names[index], value: values[index] });
});
min = 0;
max = 3000;
}
if (check === 2) {
title = "國內新增確診地圖";
this.datas.forEach((item, index) => {
names.push(item.name);
values.push(item.today.confirm);
data.push({ name: names[index], value: values[index] });
});
min = 0;
max = 5;
}
echarts.registerMap("china", china);
let myChart = echarts.init(this.$refs.chart);
myChart.clear();
let option = {
title: {
text: title,
left: "center"
},
tooltip: {
trigger: "item",
showDelay: 0,
transitionDuration: 0.2
},//工具
visualMap: {
left: "right",
min: min,
max: max,
inRange: {
color: [
"#f9f9fa",
// "#bfbfc0",
// "#74add1",
// "#abd9e9",
// "#e0f3f8",
// "#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026"
]//顏色梯度
},
text: ["High", "Low"], // 文本，默認為數值文本 見地圖
calculable: true
},
toolbox: {
show: true,
//orient: 'vertical',
left: "left",
top: "top",
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}//工具功能
},
series: [
{
name: "資料",
type: "map",
roam: true,
map: "china",//地圖
emphasis: {
label: {
show: true
}
},
itemStyle: {
normal: {
label: {
show: true//顯示城市名
}
}
},
data: data
}
]
};
myChart.setOption(option);//繪圖
this.isChina = true;//控制地圖選擇是否顯示
myChart.on("click", function(params) {
console.log(params);
});
解釋
check控制選擇地圖型別(總，新增，現存)
min和max 還有color陣列
對應最大最小和顏色梯度
myChart.on(“click”, function(params) {
console.log(params);
});
點擊地圖觸發事件
海外疫情地圖資料處理繪制
let datas = [];
let title = "";
this.isChina = false;
this.check = check;
let min = 0;
let max = 100;
echarts.registerMap("world", world);
let values = [];
if (check === 0) {
this.worldData.forEach((item, index) => {
values.push(item.nowConfirm);
let sss = this.worldNames[index];
sss = sss.substring(1, sss.length - 1);
if (sss === "USA") {
sss = "United States";
}
datas.push({
name: sss,
value: values[index]
});
});
datas.push({ name: "China", value: this.chinaNow });
title = "世界疫情現存地圖";
min = 1000;
max = 100000;
}
if (check === 1) {
this.worldData.forEach((item, index) => {
values.push(item.confirm);
let sss = this.worldNames[index];
sss = sss.substring(1, sss.length - 1);
if (sss === "USA") {
sss = "United States";
}
datas.push({
name: sss,
value: values[index]
});
});
datas.push({ name: "China", value: this.chinaTotal });
title = "世界疫情總確診地圖";
min = 100000;
max = 1000000;
}
if (check === 2) {
this.worldData.forEach((item, index) => {
values.push(item.confirmAdd);
let sss = this.worldNames[index];
sss = sss.substring(1, sss.length - 1);
if (sss === "USA") {
sss = "United States";
}
datas.push({
name: sss,
value: values[index]
});
});
datas.push({ name: "China", value: this.chinaAdd });
title = "世界疫情新增確診地圖";
min = 10;
max = 1000;
}
let myChart = echarts.init(this.$refs.chart);
myChart.clear();
let option = {
title: {
text: title,
left: "center"
},
tooltip: {
trigger: "item",
showDelay: 0,
transitionDuration: 0.2
},
visualMap: {
left: "right",
min: min,
max: max,
inRange: {
color: [
"#f9f9fa",
// "#bfbfc0",
// "#74add1",
// "#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026"
]
},
text: ["High", "Low"], // 文本，默認為數值文本見地圖
calculable: true
},
toolbox: {
show: true,
//orient: 'vertical',
left: "left",
top: "top",
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [
{
name: "資料",
type: "map",
roam: true,
map: "world",
emphasis: {
label: {
show: true
}
},
itemStyle: {
normal: {
label: {
show: false
}
}
},
data: datas
}
]
};
myChart.setOption(option);
let vm = this;
myChart.on("click", function(params) {
console.log(params);
if (params.name === "China") {
console.log(1111);
vm.setEcs(vm.check);
}
});
解釋參考國內的
說明
myChart.on(“click”, function(params) {
console.log(params);
if (params.name === “China”) {
console.log(1111);
vm.setEcs(vm.check);
}
進入中國地圖
完整代碼
<template>
<div>
<div
style="background-color: #42b983;width: 1010px;height: 810px;"
v-loading="isLoading"
>
<div
style="float: left;position: relative;top:50px;left: 250px;z-index: 5"
v-if="!isChina"
>
<el-button type="success" @click="getworld">重繪</el-button>
<el-button type="info" @click="setEc(0)">現存確診</el-button>
<el-button type="info" @click="setEc(1)">總確診</el-button>
<el-button type="info" @click="setEc(2)">新增確診</el-button>
<el-button type="info" @click="setEcs(check)">中國</el-button>
</div>
<div
style="float: left;position: relative;left: 250px;z-index: 5"
v-if="isChina"
>
<h3>上次更新時間{{ lastTime }}</h3>
<el-button type="success" @click="getSd">重繪</el-button>
<el-button type="info" @click="setEcs(0)">現存確診</el-button>
<el-button type="info" @click="setEcs(1)">總確診</el-button>
<el-button type="info" @click="setEcs(2)">新增確診</el-button>
<el-button type="info" @click="setEc(check)">全球</el-button>
</div>
<div style="width: 1000px;height: 800px;" ref="chart"></div>
</div>
</div>
</template>
<script>
import md5 from "js-md5";
import echarts from "echarts";
import china from "echarts/map/json/china.json";
import world from "echarts/map/json/world.json";
// import lodash from 'lodash'
import axios from "axios";
export default {
name: "echartest",
data() {
return {
chinaTotal: 0,
chinaAdd: 0,
chinaNow: 0,
datas: [],
worldData: [],
lastTime: "",
check: 0,
isLoading: false,
isChina: false,
worldNames: [],
worldValue: []
};
},
mounted() {
this.isLoading = true;
this.getSd();
this.getworld();
},
methods: {
test(content) {
return axios.post(
"http://api.aifanyi.net/google.php",
`content=${content}&from=zh-CN&fromtxt=中文&to=英文&totxt=英語`
);
},
getworld() {
this.isLoading = true;
axios
.post(
"https://api.inews.qq.com/newsqa/v1/automation/foreign/country/ranklist"
)
.then(res => {
let data = res.data.data;
let names = [];
data.forEach(item => {
names.push(item.name);
});
this.worldData = data;
this.test(names).then(res => {
console.log(res.data.dst);
let ss = res.data.dst;
console.log(ss);
let namess = ('"' + ss.replace(/, /g, '","') + '"').split(",");
this.worldNames = namess;
this.setEc(this.check);
this.isLoading = false;
});
});
},
getSd() {
this.isLoading = true;
axios.post(`/api/getDisease.html`).then(res => {
let data = JSON.parse(res.data.data);
console.log(data);
let dss = data.areaTree[0].children;
this.datas = dss;
this.chinaTotal = data.chinaTotal.confirm;
this.chinaAdd = data.chinaAdd.confirm;
this.chinaNow = data.chinaTotal.nowConfirm;
this.lastTime = data.lastUpdateTime;
this.isLoading = false;
});
},
setEcs(check) {
let min = 0;
let max = 100;
let title = " 地圖";
let data = [];
let names = [];
let values = [];
this.check = check;
if (check === 0) {
title = "國內現存確診地圖";
this.datas.forEach((item, index) => {
names.push(item.name);
values.push(item.total.confirm - item.total.dead - item.total.heal);
data.push({ name: names[index], value: values[index] });
});
min = 0;
max = 100;
}
if (check === 1) {
title = "國內總確診地圖";
this.datas.forEach((item, index) => {
names.push(item.name);
values.push(item.total.confirm);
data.push({ name: names[index], value: values[index] });
});
min = 0;
max = 3000;
}
if (check === 2) {
title = "國內新增確診地圖";
this.datas.forEach((item, index) => {
names.push(item.name);
values.push(item.today.confirm);
data.push({ name: names[index], value: values[index] });
});
min = 0;
max = 5;
}
echarts.registerMap("china", china);
let myChart = echarts.init(this.$refs.chart);
myChart.clear();
let option = {
title: {
text: title,
left: "center"
},
tooltip: {
trigger: "item",
showDelay: 0,
transitionDuration: 0.2
},
visualMap: {
left: "right",
min: min,
max: max,
inRange: {
color: [
"#f9f9fa",
// "#bfbfc0",
// "#74add1",
// "#abd9e9",
// "#e0f3f8",
// "#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026"
]
},
text: ["High", "Low"], // 文本，默認為數值文本
calculable: true
},
toolbox: {
show: true,
//orient: 'vertical',
left: "left",
top: "top",
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [
{
name: "資料",
type: "map",
roam: true,
map: "china",
emphasis: {
label: {
show: true
}
},
itemStyle: {
normal: {
label: {
show: true
}
}
},
// 文本位置修正
data: data
}
]
};
myChart.setOption(option);
this.isChina = true;
myChart.on("click", function(params) {
console.log(params);
});
},
setEc(check) {
let datas = [];
let title = "";
this.isChina = false;
this.check = check;
let min = 0;
let max = 100;
echarts.registerMap("world", world);
let values = [];
if (check === 0) {
this.worldData.forEach((item, index) => {
values.push(item.nowConfirm);
let sss = this.worldNames[index];
sss = sss.substring(1, sss.length - 1);
if (sss === "USA") {
sss = "United States";
}
datas.push({
name: sss,
value: values[index]
});
});
datas.push({ name: "China", value: this.chinaNow });
title = "世界疫情現存地圖";
min = 1000;
max = 100000;
}
if (check === 1) {
this.worldData.forEach((item, index) => {
values.push(item.confirm);
let sss = this.worldNames[index];
sss = sss.substring(1, sss.length - 1);
if (sss === "USA") {
sss = "United States";
}
datas.push({
name: sss,
value: values[index]
});
});
datas.push({ name: "China", value: this.chinaTotal });
title = "世界疫情總確診地圖";
min = 100000;
max = 1000000;
}
if (check === 2) {
this.worldData.forEach((item, index) => {
values.push(item.confirmAdd);
let sss = this.worldNames[index];
sss = sss.substring(1, sss.length - 1);
if (sss === "USA") {
sss = "United States";
}
datas.push({
name: sss,
value: values[index]
});
});
datas.push({ name: "China", value: this.chinaAdd });
title = "世界疫情新增確診地圖";
min = 10;
max = 1000;
}
let myChart = echarts.init(this.$refs.chart);
myChart.clear();
let option = {
title: {
text: title,
left: "center"
},
tooltip: {
trigger: "item",
showDelay: 0,
transitionDuration: 0.2
},
visualMap: {
left: "right",
min: min,
max: max,
inRange: {
color: [
"#f9f9fa",
// "#bfbfc0",
// "#74add1",
// "#abd9e9",
"#e0f3f8",
"#ffffbf",
"#fee090",
"#fdae61",
"#f46d43",
"#d73027",
"#a50026"
]
},
text: ["High", "Low"], // 文本，默認為數值文本
calculable: true
},
toolbox: {
show: true,
//orient: 'vertical',
left: "left",
top: "top",
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
series: [
{
name: "資料",
type: "map",
roam: true,
map: "world",
emphasis: {
label: {
show: true
}
},
itemStyle: {
normal: {
label: {
show: false
}
}
},
// 文本位置修正
data: datas
}
]
};
myChart.setOption(option);
let vm = this;
myChart.on("click", function(params) {
console.log(params);
if (params.name === "China") {
console.log(1111);
vm.setEcs(vm.check);
}
});
},
}
};
</script>
<style scoped></style>
代碼優化
可以優化重復的比如check選擇那一塊，繪制也可以優化，優化的地方還有很多，這里只講實作
??大家好，我是代碼哈士奇，是一名軟體學院網路工程的學生，因為我是“狗”，狗走千里吃肉，想把大學期間學的東西和大家分享，和大家一起進步，但由于水平有限，博客中難免會有一些錯誤出現，有紕漏之處懇請各位大佬不吝賜教！暫時只在csdn這一個平臺進行更新，博客主頁：https://blog.csdn.net/qq_42027681，
未經本人允許，禁止轉載
后續會推出
前端：vue入門 vue開發小程式 等
后端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 云服務器運行專案
python：推薦不溫卜火 一定要看哦
一些插件的使用等
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910
有問題可以下方留言，看到了會回復哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/227567.html
標籤：其他