vue项目实战之用echarts实现疫情地图，jsonp跨域处理。

今天我们来学习一下vue项目中用echarts实现疫情地图，jsonp做跨域处理。

搭建脚手架@vue/cli

1.node安装。
2.命令npm install -g @vue/cli
3.命令npm install webpack -g​
4.命令vue create echarts-demo
如若不会搭建脚手架，请移步这里查看搭建方法。
脚手架搭建好后，效果如下图：

封装自定义组件与配置路由

封装自定义组件

我们先在views文件夹下新建一个自定义的组件Echarts.vue,如下图所示：

然后打开APP.vue，配置如下图所示的路由跳转:

最后在router文件下的index.js里配置刚刚我们自定义组件Echarts.vue对应的路由，如下图所示:

当然你也可以使用另一种方式配置路由，那就是

import Echarts from ‘…/views/Echarts’
const routes = [
path:’/echarts’,
name:‘Echarts’,
component:Echarts
]
然后我们打开浏览器，点击Echarts就能看到如下图所示效果:

Echarts的安装与使用

echarts的安装

echarts的官网是https://www.echartsjs.com/zh/index.html,
echarts的安装我们直接在终端输入如下命令安装
npm install echarts --save
安装成功之后，我们会在package.json里看到如下echarts对应的版本号:

echarts的使用

先在Echarts.vue里准备一个DOM容器：

然后引入echarts:

然后在data里定义echarts，并在组件挂载之后初始化一个 echarts 实例并通过 setOption 方法生成一个中国地图:

最后指定图表的数据:

我们先来看下效果图：

我们再来看下option里是如何配置的，我在图中用红框红线已标识，option里的title配置项对应标题“vue实现疫情地图”，option里的visualMap配置项对应左下角的视觉地图，option里的toolbox配置项对应右上角的下载工具，option里的tooltip配置项对应地图上的提示信息，如果有对这些配置项不熟悉的同学可以去echarts官网学一下。我们会发现，地图上确诊数据为NaN说明没有拿到这个值，但一般我们是从后端获取我们想要的数据，这里我们用jsonp跨域请求获取数据。

jsonp的使用

终端里用命令安装jsonp
npm install jsonp
我们来看一下项目完整的代码:

再来看一下最终的效果:

我们发现此时青海确诊数据有了，显示18.
注意：jsonp虽然可以实现跨域请求，但是它只能用于get方法请求而不能用于post请求，另外，在实际项目开发中我们处理跨域一般不用jsonp.