＞＞Vue3+pinia+echarts等实现疫情可视化大图

GIS小小白

已于 2024-03-20 20:30:36 修改

阅读量940

点赞数 24

文章标签： echarts 前端 javascript vue.js 数据可视化

于 2024-03-20 20:19:33 首次发布

本文链接：https://blog.csdn.net/weixin_73810008/article/details/136885786

版权

一.>>前言

1.这个项目是在小满实战篇可视化（第九章-饼图）_哔哩哔哩_bilibili 这一系列课程为基础来做的，真的很感谢小满老师，讲的内容干货满满，暂时解决了手上没有项目的难题。大家可以去观摩一下他的优质课程。

2.该项目所需要的接口来自于实时更新|新冠肺炎疫情动态地图 (163.com)，不知道这个接口什么时候什么时候停止服务，所以想练练手的要抓紧。

3.出现问题立马查询官方API文档，API更新迭代的速度还是蛮快的。

二.>>效果图

三.>>项目实现步骤(大致)

1.找到接口并调试

如果有postman或者Apifox的话可以用这个调试，如果不想，毕竟也是个小接口，那就用vscode的插件REST Client，相当方便

调试过程及结果如下图：

2.开服务器调用接口传数据到前端

新开一个文件夹，创建一个ts文件，再在终端依次输入npm install ts-node -g，npm init -y，

npm install @types/node -D,npm install express -S,npm install @types/express -D,

npm install axios -S,然后就可以开始编写了，对应完整代码可以看GISpjd/Visualization-of-epidemic-data (github.com)，这部分代码在仓库里的api文件夹里，克隆调试记得下载依赖，先看一下代码片段：

import express, { Express, Router, Request, Response, NextFunction } from 'express'
import axios from 'axios'

const app: Express = express();

//解决跨域问题
app.all('*', (req: Request, res: Response, next: NextFunction) => {
    res.header('Access-Control-Allow-Origin', '*')
    next()
})
const router: Router = express.Router();
app.use('/api', router)

router.get('/list', async (req: Request, res: Response) => {
    const result = await axios.get('https://c.m.163.com/ug/api/wuhan/app/data/list-total?t=342166027082')
    res.json({
        // data: result.data
        //根据数据结构提前解构
        ...result.data.data
    })
})

app.listen(3333, () => {
    console.log('success server http://localhost:3333')
})