代碼倉庫: https://gitee.com/shentuzhigang/covid-19-map

Blog: https://shentuzhigang.blog.csdn.net/article/details/116157059

實驗目標

掌握使用Vue-CLI腳手架工具在自己的電腦上建立項目，并運行調試工具。

學習使用ECharts圖表開源庫開發地圖展示功能，了解圖表開發方法。基本用法參考ECharts官網：https://www.echartsjs.com/zh/feature.html

實驗內容

Vue-CLI腳手架工具搭建一個Web項目yiqing_demo。

使用Vue.js和ECharts編寫一個疫情地圖顯示網頁。內容及格式可自己定
效果可參照丁香園疫情地圖：https://ncov.dxy.cn/ncovh5/view/pneumonia

實驗詳細過程和步驟

截圖展示

主要代碼及實現方法簡介

創建項目

先安裝好開發工具：node.js、vue/cli4、webpack
使用vue/cli4搭建項目，命令：

vue create vue-ditu-3

添加Vue-Router，命令：

vue add router

使用vue/cli腳手架搭建好項目后，運行項目，命令：

npm run serve

封裝自定義組件

在views文件夾下新建一個自定義的組件Echarts.vue

<template><div></div> </template><script>export default {name: "EChart",data() {return {}}} </script><style scoped></style>

配置路由

在router文件下的index.js里配置自定義的組件Echarts.vue對應的路由

然后打開APP.vue，配置如下圖所示的路由跳轉:

在路由配置時，你也可以使用另一種路由配置方式

import ECharts from "../views/ECharts"; const routes = [{path: '/echarts',name: 'ECharts',component: ECharts} ]

配置好路由后，點擊Echarts就能看到如下圖所示效果:

ECharts的簡介

ECharts，縮寫來自 Enterprise Charts，商業級數據圖表，是百度的一個開源的數據可視化工具，一個純Javascript的圖表庫，目前很多商業項目都在使用。
Echarts的官網是：https://www.echartsjs.com/zh/index.html
官網地圖案例：https://www.echartsjs.com/examples/en/editor.html?c=doc-example/map-visualMap-pieces&edit=1
你可以在案例左邊修改數據和參數，右邊就可以實時顯示效果。

ECharts的安裝

在項目中安裝Echarts，直接在終端輸入如下命令:

npm install echarts@4.7.0 --save

注：指定版本號，因為最新版的ECharts不包含中國地圖。

安裝成功之后，我們會在package.json里看到如下echarts對應的版本號:

ECharts的使用

<template><div><div id="chart" style="width: 600px;height:500px; margin: 0 auto">展示地圖的地方</div></div> </template><script>import echarts from 'echarts' //引入echartsimport 'echarts/map/js/china' //引入中國地圖export default {name: "ECharts",data() {return {myChart:''}},mounted(){let option ={title:{ //標題text:'實時疫情地圖',x:'center', //居中textStyle:{ //標題 樣式color:'#9c0505'}},tooltip:{ //提示信息trigger: 'item', //類型//地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合并數值）, ozvdkddzhkzd（無）formatter: '地區：{b}<br/>確診：{c}'},series:[ //數據{type:'map', //圖表的類型map:'china',data:[{name: '北京', value: 100},{name: '湖北', value: 12000},{name: '湖南', value: 2000},{name: '西藏', value: 30},],label:{ //圖形上的文本標簽，可用于說明圖形的一些數據信息show:true,color:'red',fontSize:10},zoom:1.3, //當前視角的縮放比例。itemStyle:{ //地圖區域的多邊形 圖形樣式。borderColor:'blue',},emphasis:{ //高亮狀態下的設置label:{ //圖形上的文本標簽，可用于說明圖形的一些數據信息color:'#fff',fontSize:12},itemStyle:{ //地圖區域的多邊形 圖形樣式。areaColor:'green',},}}],visualMap: { //視覺地圖type:'piecewise', //分段型show:true,pieces: [{min: 10000}, // 不指定 max，表示 max 為無限大（Infinity）。{min: 1000, max: 9999},{min: 100, max: 999},{min: 10, max: 99},{min: 1, max: 9},{value: 0} // 不指定 min，表示 min 為無限大（-Infinity）。],inRange: { //范圍color: ['#fff', '#ffaa85', '#660208'],},itemWidth:10,itemHeight:10},toolbox: {show: true,orient: 'horizontal',left: 'right',top: 'top',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},};// 基于準備好的dom，初始化echarts實例this.myChart = echarts.init(document.getElementById('chart'));// 使用剛指定的配置項和數據顯示圖表。this.myChart.setOption(option);}} </script><style scoped></style>

效果圖：

加載數據

數據接口

一、新浪疫情數據接口：
http://interface.sina.cn/news/wap/fymap2020_data.d.json?=1580892522427
二、騰訊的疫情數據，接口地址：
https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5&callback=jQuery34102581268431257997_1582545445186&=1582545445187

案例一：使用騰訊的疫情數據，案例網址：https://www.jianshu.com/p/293c4d7500eb?utm_campaign=hugo

三、開源項目疫情數據接口（數據來自丁香園）：
接口介紹網址：
https://lab.isaaclin.cn/nCoV/zh
https://github.com/BlankerL/DXY-COVID-19-Crawler
數據接口：https://lab.isaaclin.cn/nCoV/api/area

方法一：jsonp實現跨域請求

注意：
跨域問題，簡單理解：同一個ip、同一個網絡協議、同一個端口，三者都滿足就是同一個域，否則就是跨域問題了。為了系統的安全，所有支持JavaScript的瀏覽器遵循同源策略，即域名、協議、端口相同，屬于同一個域，可以直接訪問，瀏覽器默認不可跨域訪問。
jsonp雖然可以實現跨域請求，但是它只能用于get方法請求而不能用于post請求，另外，在實際項目開發中由于這種方式并不安全，在處理跨域問題時一般不用jsonp，現在大多數企業采用httpclient基于服務端的跨域解決技術。

在終端里用命令安裝jsonp

npm install jsonp

引入jsonp

請求數據

<template><div><div id="chart" style="width: 600px;height:500px;">展示地圖的地方</div></div> </template><script>import echarts from 'echarts' //引入echartsimport 'echarts/map/js/china' //引入中國地圖import jsonp from 'jsonp' //引入jsonplet option ={title:{ //標題text:'實時疫情地圖',x:'center', //居中textStyle:{ //標題 樣式color:'#9c0505'}},tooltip:{ //提示信息trigger: 'item', //類型//地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合并數值）, ozvdkddzhkzd（無）formatter: '地區：{b}<br/>確診：{c}'},series:[ //數據{type:'map', //圖表的類型map:'china',data:[{name: '北京', value: 100},{name: '湖北', value: 12000},{name: '湖南', value: 2000},{name: '西藏', value: 30},],label:{ //圖形上的文本標簽，可用于說明圖形的一些數據信息show:true,color:'red',fontSize:10},zoom:1.3, //當前視角的縮放比例。itemStyle:{ //地圖區域的多邊形 圖形樣式。borderColor:'blue',},emphasis:{ //高亮狀態下的設置label:{ //圖形上的文本標簽，可用于說明圖形的一些數據信息color:'#fff',fontSize:12},itemStyle:{ //地圖區域的多邊形 圖形樣式。areaColor:'green',},}}],visualMap: { //視覺地圖type:'piecewise', //分段型show:true,pieces: [{min: 10000}, // 不指定 max，表示 max 為無限大（Infinity）。{min: 1000, max: 9999},{min: 100, max: 999},{min: 10, max: 99},{min: 1, max: 9},{value: 0} // 不指定 min，表示 min 為無限大（-Infinity）。],inRange: { //范圍color: ['#fff', '#ffaa85', '#660208'],},itemWidth:10,itemHeight:10},toolbox: {show: true,orient: 'horizontal',left: 'right',top: 'top',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},};export default {name: "ECharts",data() {return {myChart:''}},mounted(){this.getData();// 基于準備好的dom，初始化echarts實例this.myChart = echarts.init(document.getElementById('chart'));// 使用剛指定的配置項和數據顯示圖表。this.myChart.setOption(option);},methods:{getData(){ //獲取網絡接口數據//jsonp('url',function(){}) //1585397547284jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1585397547299',(err,data)=>{// console.log(data.data.list)//data.data.list//使用js里面map()方法，循環遍歷后，獲取數據里面一部分值。var lists = data.data.list.map(item=>{return {name: item.name, value: item.value}});console.log(lists);option.series[0].data = lists;// 使用剛指定的配置項和數據顯示圖表。this.myChart.setOption(option);})}}} </script><style scoped>#chart {margin: 0 auto;} </style>

方法二：axios+devServer代理請求轉發

配置devServer代理

module.exports = {devServer: {/* 自動打開瀏覽器 */open: true,/* 設置為0.0.0.0則所有的地址均能訪問 */host: '0.0.0.0',port: 8081,https: false,hotOnly: false,/* 使用代理 */proxy: {'/news/wap/fymap2020_data.d.json': {ws:false,/* 目標代理服務器地址 */target: 'https://interface.sina.cn',/* 允許跨域 */changeOrigin: true,},},}, }

在終端里用命令安裝axios

npm install axios

引入axios

請求數據

<template><div><div id="chart" style="width: 600px;height:500px;">展示地圖的地方</div></div> </template><script>import echarts from 'echarts' //引入echartsimport 'echarts/map/js/china' //引入中國地圖import axios from 'axios' //引入axioslet option ={title:{ //標題text:'實時疫情地圖',x:'center', //居中textStyle:{ //標題 樣式color:'#9c0505'}},tooltip:{ //提示信息trigger: 'item', //類型//地圖 : {a}（系列名稱），{b}（區域名稱），{c}（合并數值）, ozvdkddzhkzd（無）formatter: '地區：{b}<br/>確診：{c}'},series:[ //數據{type:'map', //圖表的類型map:'china',data:[{name: '北京', value: 100},{name: '湖北', value: 12000},{name: '湖南', value: 2000},{name: '西藏', value: 30},],label:{ //圖形上的文本標簽，可用于說明圖形的一些數據信息show:true,color:'red',fontSize:10},zoom:1.3, //當前視角的縮放比例。itemStyle:{ //地圖區域的多邊形 圖形樣式。borderColor:'blue',},emphasis:{ //高亮狀態下的設置label:{ //圖形上的文本標簽，可用于說明圖形的一些數據信息color:'#fff',fontSize:12},itemStyle:{ //地圖區域的多邊形 圖形樣式。areaColor:'green',},}}],visualMap: { //視覺地圖type:'piecewise', //分段型show:true,pieces: [{min: 10000}, // 不指定 max，表示 max 為無限大（Infinity）。{min: 1000, max: 9999},{min: 100, max: 999},{min: 10, max: 99},{min: 1, max: 9},{value: 0} // 不指定 min，表示 min 為無限大（-Infinity）。],inRange: { //范圍color: ['#fff', '#ffaa85', '#660208'],},itemWidth:10,itemHeight:10},toolbox: {show: true,orient: 'horizontal',left: 'right',top: 'top',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},};export default {name: "ECharts",data() {return {myChart:''}},mounted(){this.getData();// 基于準備好的dom，初始化echarts實例this.myChart = echarts.init(document.getElementById('chart'));// 使用剛指定的配置項和數據顯示圖表。this.myChart.setOption(option);},methods:{getData(){ //獲取網絡接口數據axios.get('/news/wap/fymap2020_data.d.json?_=1585397547299').then(data=>{data = data.dataconsole.log(data.data.list)//data.data.list//使用js里面map()方法，循環遍歷后，獲取數據里面一部分值。var lists = data.data.list.map(item=>{return {name: item.name, value: item.value}});console.log(lists);option.series[0].data = lists;// 使用剛指定的配置項和數據顯示圖表。this.myChart.setOption(option);}).catch( (error) => {console.log(error);});}}} </script><style scoped>#chart {margin: 0 auto;} </style>

文件比較

效果圖

心得體會

掌握使用Vue-CLI腳手架工具在自己的電腦上建立項目，并運行調試工具。

學習使用ECharts圖表開源庫開發地圖展示功能，了解圖表開發方法。

總結

以上是生活随笔為你收集整理的《移动应用开发》实验报告——疫情地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。