vue3搭配ts和echarts实现疫情地图自配接口，省级可以进二级市区右侧可查看高低。

rcharts画一个疫情地图项目的介绍

本次项目需要使用到 vue3 +ts + echarts 第三方的可视化图表库，还要一个map包，以及我们的疫情数据（具体看下面）。

echarts地址 用的是美国的模板可以自己改。

echarts 地图地址 ：Examples - Apache ECharts

map地址。

阿里云数据可视化平台：DataV.GeoAtlas地理小工具系列

地图包在阿里云数据可视化平台里面：100000可以写入子级id就可以请求到子级的map数据https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json

疫情数据的地址：里面 list 是疫情数据。

https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427

开始安装依赖

插件版本号 只需要 粘贴到 package.json dependencies 里面 npm i 就ok

"echarts": "^5.3.2",

"axios": "^0.26.1",

请求数据逻辑处理

  
​

​

vue.config.js文件夹里面写入配置跨域

const {
  defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open: true, // 自动打开浏览器
    // proxy: "https://sug.so.360.cn", 这个接口必须跨域
    // 可以直接设置跨域的地址
    proxy: {
      "/api": {
        target: "https://interface.sina.cn", // 疫情的数据需要进行处理
        changeOrigin: true, //允许跨域
        pathRewrite: {
          "^/api": "",
        },
      },
    },
    //  不是所有的接口都要跨域 也可以给需要跨域的接口起一个识别的名字  
    // 只有前面带/api的接口才会跨域 其他的接口正常访问
  },
})

效果