【前端可视化】大屏可视化项目二 scale适配方案 g6流程图更复杂的图表

最新推荐文章于 2025-04-21 10:32:24 发布

ZhaiMou

最新推荐文章于 2025-04-21 10:32:24 发布

阅读量1.1k

点赞数 14

文章标签：前端流程图 css vue.js echarts 面试 javascript

本文链接：https://blog.youkuaiyun.com/weixin_63625059/article/details/141003886

版权

项目介绍

第二个大屏可视化，整个项目利用scale进行按比例适配。图表更加复杂，涉及到图表的叠加，mark，地图，g6流程图的能等

始终保持比例适配(本项目方案),始终满屏适配(项目一).
echarts绘制较为复杂图表，更深入锻炼echarts.

按比例用scale适配思路

开发项目直接使用设计图量出的尺寸填写大小
页面打开，读取当前屏幕宽，高
按当前屏幕宽高，通过scale缩放整个项目
让项目高度，横向竖向始终居中

请添加图片描述

最终实现效果

请添加图片描述

使用vite搭建vue项目

然后在项目根目录下 index.html

<body>

<div id="app"></div>

<script>

function setScale(){
     

const designWidth=4352;

const designHeight=1536;

const nowWidth=document.documentElement.clientWidth //window.screnn.width

const nowHeight=document.documentElement.clientHeight

const designRatio=designWidth/designHeight;

const nowRatio=nowWidth/nowHeight;

const app=document.getElementById("app");

//根据宽高比，决定按宽度进行scale还是高度进行scale

const scale=nowRatio<designRatio?nowWidth/designWidth:nowHeight/designHeight

app.style.transform=`scale(${
       scale}) translate(-50%,-50%)`

}

setScale();

window.addEventListener("resize",setScale)

</script>

<script type="module" src="/src/main.js"></script>

</body>

在assets静态目录下创建main.css 并在main.js中引入

#app{
   

transform-origin: 0 0;

width: 4352px;

height: 1536px;

background: url('./backf.jpg');

background-size: 100% 100%;

/* 让他居中 */

position: fixed;

top:50%;

left:50%

}

整体布局和基本组件

//App.vue
<script setup>

import {
    onMounted } from 'vue';

import produceChart from "@/components/chartComponent/produceChart.vue"

import monthPlanChart from "@/components/chartComponent/monthPlanChart.vue"

import mapChart from "@/components/chartComponent/mapChart.vue"

import qualityChart from "@/components/chartComponent/qualityChart.vue"

import carType from "@/components/chartComponent/carType.vue"

import complaintTable from "@/components/chartComponent/complaintTable.vue"

import majorChart from "@/components/chartComponent/majorChart.vue"

import g6chart from "@/components/chartComponent/g6chart.vue"

</script>

  

<template>

<div class="container">

<div class="title">

作战指挥室

</div>

<div class="column-one">

<produceChart></produceChart>

<monthPlanChart></monthPlanChart>

</div>

<div class="column-two">

<mapChart></mapChart>

<qualityChart></qualityChart>

</div>

<div class="column-three">

<carType></carType>

<complaintTable></complaintTable>

</div>

<div class="column-four">

<majorChart></majorChart>

<g6chart></g6chart>

</div>

</div>

</template>

  

<style scoped lang="less">

.container {
   

padding: 24px 55px;

width: 100%;

height: 100%;

box-sizing: border-box;

display: flex;

justify-content: space-between;

position: relative;

  

.title {
   

position: absolute;

left: 50%;

top: 20;

font-size: 48px;

color: red;

font-weight: 800;

transform: translateX(-50%);

}

  

.column-one,

.column-four,

.column-two,

.column-three {
   

display: flex;

flex-direction: column;

justify-content: space-between;

}

  

.column-one,

.column-four {
   

width: 1005px;

height: 100%;

  

}

  

.column-two,

.column-three {
   

width: 1036px;

height: 100%;

  

}

}

</style>

将布局容器作为基础组件

// src/components/baseComponent/bottomChartContent.vue
<script setup>

const {
    title } = defineProps(['title'])

  

</script>

  

<template>

<div class="bottomChartContent">

<div class="title"> {
   {
    title }}</div>

<div class="soltContainer">

<slot></slot>

</div>

</div>

</template>

  

<style scoped lang="less">

.bottomChartContent {
   

width: 100%;

height: 558px;

background: url('../../assets/backpart2.png');

background-size: 100% 100%;

display: flex;

flex-direction: column;

  

.title {
   

font-size: 32px;

color: white;

width: 100%;

text-align: center;

}

  

.soltContainer {
   

width: 100%;

flex: 1

}

}

</style>
//components/baseComponent/topChartContent.vue
<script setup>

const {
    title } = defineProps(['title'])

  

</script>

  

<template>

<div class="topChartContainer">

<div class="title"> {
   {
    title }}</div>

<div class="soltContainer">

<slot></slot>

</div>

</div>

</template>

  

<style scoped lang="less">

.topChartContainer {
   

width: 100%;

height: 878px;

background: url('../../assets/backpart1.png');

background-size: 100% 100%;

display: flex;

flex-direction: column;

  

.title {
   

font-size: 32px;

color: white;

width: 100%;

text-align: center;

padding-top: 78px;

}

  

.soltContainer {
   

width: 100%;

flex: 1

}

}

</style>

请求封装

// request/index.js
import axios from "axios";

const request = axios.create({
   

timeout: 3000,

baseURL: import.meta.env.VITE_BASE_URL,

})

request.interceptors.request.use((config) => {
   

const token = localStorage.getItem("token");

if (token) {
   

config.auth = token;

}

return config

})

request.interceptors.response.use((res) => {
   

if

最低0.47元/天解锁文章