vue3大屏可视化项目，包含地图，各种 图表，全屏适配方案
项目设计
1.始终满屏适配，这种方案一般用在屏幕变化不会特别的大项目，项目基本上不会用在比例非常不协调的大屏，设计图按1920*1080标准电脑屏幕比，所用的屏幕也基本在这个比例左右
2.涉及图表知识点简单，主要有自定义色系，环形图，堆叠柱状图，折线图
3.使用高德地图标点做中间地图
满屏适配方案实现思路
1 宽度使用vw，高度使用vh，严格按照设计图换算，并且留出缓冲空间
2 具体算法，设计图为1920_1080
高度上：
1.设计图上量取高度
2.高度除以设计图高度1080
3得到结果_100
4计算结果加上vh单位3
宽度上：
设计图上量取宽度
高度除以设计图高度1920
得到结果*100
计算结果加上vw单位
3 特别提醒，因为我们大屏项目，高度要始终保持一屏，一般移动端项目高度不用一屏，是可以滚动的，所以高宽统一VW
项目头部制作
//
大数据展示
项目请求和环境搭建
// request/index.js
import axios from 'axios'
const request = axios.create({
timeout:10000,
baseURL:import.meta.env.VITE_BASE_URL
})
request.interceptors.request.use((config) => {
return config
})
request.interceptors.response.use((res) => {
if(res.data.code !== 200){
alert("请求错误")
}
return res
},(res) => {
alert("请求错误")
throw new Error(res)
})
export default request
// api/index.js
import request from '../request/index.js'
export function getGather(){
return request.get("/getGather")
}
export function getChargeData(){
return request.get("/getCharGeData")
}
export function getOutpatient(){
return request.get("/getOutpatient")
}
export function hosiptalPostion(){
return request.get("/hosiptalPostion")
}
export function getHospitalization(){
return request.get("/getHospitalization")
}
在根目录创建.env.development和.env.production
VITE_BASE_URL="http://localhost:8000"
在App.vue
const loading = ref(true);
async function getAllData() {
//获取收费数据
const chargeRes = await getChargeData();
//获取采集数
const gatherRes = await getGather()
//获取门诊数据
const hospitalizationRes = await getHospitalization();
//获取住院数据
const outpatientRes = await getOutpatient();
//获取医院位置
loading.value = false;
return {
chargeRes: chargeRes.data.data,
gatherRes: gatherRes.data.data,
hospitalizationRes: hospitalizationRes.data.data,
outpatientRes: outpatientRes.data.data
}
}
顶部项目总览菜单
// components/showData.vue
![]()
{{ item.totalTitle }}
{{ props.data[index]?.total }}
![]()
{{ item.monthTitle }}
{{ props.data[index]?.month }}
//App.vue
async function getAllData() {
//获取收费数据
const chargeRes = await getChargeData();
//获取采集数
const gatherRes = await getGather()
//获取门诊数据
const hospitalizationRes = await getHospitalization();
//获取住院数据
const outpatientRes = await getOutpatient();
//获取医院位置
loading.value = false;
return {
chargeRes: chargeRes.data.data,
gatherRes: gatherRes.data.data,
hospitalizationRes: hospitalizationRes.data.data,
outpatientRes: outpatientRes.data.data
}
}
getAllData().then((res) => {
//进行数据赋值
//形成上面数据概览所需要数据
dataofshowData.push(
{
total: res.gatherRes.allgather,
month: res.gatherRes.monthegather
},
{
total: res.hospitalizationRes.allHospitalization,
month: res.hospitalizationRes.montHospitalization
},
{
total: res.outpatientRes.allOutpatient,
month: res.outpatientRes.monthOutpatient
},
)})
chartContent.vue组件 布局组件
//component/chartContent.vue
{{ title }}
四个组件都布好局
//四个组件都是这样的布局 然后title字符串换换内容
![[Pasted image 20240803193402.png]]
堆叠柱状图和圆环图
// component/chartGather.vue
//component/chartCharge.vue
折线图与坐标轴自定义
// chartGatherToday.vue
//chartHospitalizationToday.vue
地图开发和标记点
搜索高德开放平台。注册账号并打开网站https://lbs.amap.com/api/javascript-api-v2/summary根据里面文档看代码
//项目的根目录index.html文件
Vite App
最终实现效果
如果对你有所帮助的话 点个关注吧
这篇文章是这个视频的笔记https://www.bilibili.com/video/BV1Hy411B79x/?spm_id_from=333.788&vd_source=e73709c9a1618b4c6dfd58c6c40d8986