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",

请求数据逻辑处理

  <template>
    <div id="main" class="map" ref="mapDom"></div>
  </template>
​
<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import axios from "axios";
​
// 获取dom
const mapDom: any = ref(null);
​
// 导入 echrats 包
import * as echarts from "echarts";
​
// 获取地图的数据
let mapData: any = ref([]);
​
// 下一级地图的id
const childrenId: any = ref("100000");
​
// 存一次疫情的地图
const mapEpidemic: any = ref([]);
​
// 获取传过的数据
onMounted(() => {
  // 初始化画布
  var map = echarts.init(mapDom.value);
​
  // 画布的点击事件 点击进行请求
  map.on("click", function (res: any) {
    // 这个是出自 地图子级的id
    console.log(mapData.value);
    let abcode = mapData.value.features.find(
      (item: any) => item.properties.name == res.name
    );
    // 拿到子级区的id 在下面的axios 进行请求
    let dataCity = abcode.properties.adcode;
    childrenId.value = dataCity;
​
    // 获取疫情地图 区级的数据
    let EpidemicData = mapEpidemic.value.find((value: any) => {
      return value.value == res.value;
    });
​
    // 请求地图的数据 以及疫情的数据
    axios
      .get(
        `https://geo.datav.aliyun.com/areas_v3/bound/${childrenId.value}_full.json`
      )
      .then((res: any) => {
        // registerMap 注册一个地图   mapData 地图的数据包 根据不同的数据渲染不同的地图
        echarts.registerMap("china", res.data);
        // 这个调用是进行地图的渲染 然后把 子级的地图数据传进去 因为如果名字 和 疫情的名字对不上就去不会改变
        map.setOption(mapRender(EpidemicData.city, res.data.features));
      });
  });
​
  // 首次 请求地图的总数据数据 用来初始化数据
  axios
    .get(`https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json`)
    .then((res: any) => {
      // 存一次数据 用来找子级
      mapData.value = res.data;
      // registerMap 注册一个地图   mapData 地图的数据包 根据不同的数据渲染不同的地图
      echarts.registerMap("china", res.data);
      // 这个调用是进行地图的渲染
      mapRender();
    });
​
  // 首次 请求疫情的数据 因为接口 设计到跨域 所以要进行 proxy 进行代理
  axios
    .get("/api/news/wap/fymap2020_data.d.json?_=1580892522427")
    .then((res: any) => {
      // 将数据备份一次 用来查找子级
      mapEpidemic.value = res.data.data.list;
      // 这个调用是疫情数据的渲染  mapRender 处理数据的函数
      let data = mapRender(res.data.data.list);
      // option 数据传入进去 设置数据
      map.setOption(data);
    });
});
​
// 处理数据的函数 以及 echarts 的option 数据配置 这个函数非常重要
const mapRender = (data: any = [], mapData: any = []) => {
  let mapLocal: any = [];
  mapData.forEach((value: any, index: number) => {
    console.log(value.properties.name);
    mapLocal.push(value.properties.name);
  });
​
  let city = ["北京", "重庆", "上海", "天津"];
  let area: any = {
    内蒙古: "内蒙古自治区",
    新疆: "新疆维吾尔自治区",
    广西: "广西壮族自治区",
    宁夏: "宁夏回族自治区",
    西藏: "西藏自治区",
    澳门: "俺们特别行政区",
    香港: "香港特别行政区",
  };
​
  // 便利处理字典
  let result = data.map((i: any, index: number) => {
    let name = "";
  // 有 conNum 说明有子级
    if (i.conNum) {
      return {
        name: mapLocal[index],
        value: Number(i.conNum),
      };
    } else {
      if (city.find((x: any) => x === i.name)) {
        name = i.name + "市";
      } else if (area[i.name]) {
        name = area[i.name];
      } else {
        name = i.name + "省";
      }
      return {
        name,
        value: Number(i.value),
      };
    }
  });
 
  // echarts 的数据配置选项 具体看官网
  let option = {
    title: {
      text: "中国地图",
      left: "right",
    },
    tooltip: {
      trigger: "item",
      showDelay: 0,
      transitionDuration: 0.2,
    },
    visualMap: {
      left: "right",
      min: 0,
      max: 19000,
      inRange: {
        color: [
          "#313695",
          "#4575b4",
          "#74add1",
          "#abd9e9",
          "#e0f3f8",
          "#ffffbf",
          "#fee090",
          "#fdae61",
          "#f46d43",
          "#d73027",
          "#a50026",
        ],
      },
      text: ["高", "低"],
      calculable: true,
    },
    series: [
      {
        name: "中国疫情地图",
        type: "map",
        roam: true,
        map: "china",
        // 设置地图的文字
        label: {
          show: true,
          fontSize: 8,
          color: "#fff",
        },
        emphasis: {
          label: {
            show: true,
          },
        },
        data: result,
      },
    ],
  };
​
  return option;
};
</script>
​
<style>
.map {
  width: 1200px;
  height: 690px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin: auto;
}
</style>

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的接口才会跨域 其他的接口正常访问
  },
})

效果