当前位置 博文首页 > 无限迭代中......：《移动应用开发》实验报告——疫情地图
代码仓库: https://gitee.com/shentuzhigang/covid-19-map
Blog: https://shentuzhigang.blog.csdn.net/article/details/116157059
先安装好开发工具：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，缩写来自 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，直接在终端输入如下命令:
npm install echarts@4.7.0 --save
注：指定版本号，因为最新版的ECharts不包含中国地图。
安装成功之后，我们会在package.json里看到如下echarts对应的版本号:
<template>
<div>
<div id="chart" style="width: 600px;height:500px; margin: 0 auto">展示地图的地方</div>
</div>
</template>
<script>
import echarts from 'echarts' //引入echarts
import '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}（合并数值）, {d}（无）
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
注意：
跨域问题，简单理解：同一个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' //引入echarts
import 'echarts/map/js/china' //引入中国地图
import jsonp from 'jsonp' //引入jsonp
let option ={
title:{ //标题
text:'实时疫情地图',
x:'center', //居中
textStyle:{ //标题 样式
color:'#9c0505'
}
},
tooltip:{ //提示信息
trigger: 'item', //类型
//地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
formatter: '地区：{b}<br/>确诊：{c}'
},
series:[ //数据
{
type:'map', //图表的类型
map:'china',
data:[
{name: '北京', value: 100},
{name: '湖北', value: 12000},
{name: '湖南', value: 2000},
