vue大屏可视化：4k带鱼屏、4k、2k、1920*1080、笔记本 全适配方案

2024-09-05 02:20
文章标签 javascript 可视化 vue frontend 方案 笔记本 适配 4k 1080 大屏 2k 1920 带鱼

本文主要是介绍vue大屏可视化：4k带鱼屏、4k、2k、1920*1080、笔记本 全适配方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 本方案采用的是媒体查询的方法来实现的

css媒体查询书写（可按照自己需求新增）不同尺寸下显示不同的文字大小图片大小等：

// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {}
// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {}
// 2K
@media screen and (max-width: 2560px) {}
// 全高清屏幕
@media screen and (max-width: 1920px) {}
// 14寸笔记本
@media screen and (max-width: 1366px) {}

 页面ecahrts字体大小和样式采用计算属性计算：

// 计算样式
const computedSize = computed(() => {let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;let objFun = {};// 14寸笔记本if (clientWidth <= 1366) {console.log("14寸笔记本")objFun.fontSize = 12; //文字大小objFun.symbolSize = 3; //节点大小objFun.borderWidth = 1; //线条宽度objFun.itemWidth = 12; //legend方块宽度objFun.itemHeight = 5; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};} // 全高清屏幕else if (clientWidth <= 1920) {console.log("全高清屏幕")objFun.fontSize = 15; //文字大小objFun.symbolSize = 5; //节点大小objFun.borderWidth = 2; //线条宽度objFun.itemWidth = 20; //legend方块宽度objFun.itemHeight = 8; //legend方块高度objFun.padding = [0, 55, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};}// 2Kelse if (clientWidth <= 2560) {console.log("2K")objFun.fontSize = 18; //文字大小objFun.symbolSize = 10; //节点大小objFun.borderWidth = 3; //线条宽度objFun.itemWidth = 25; //legend方块宽度objFun.itemHeight = 10; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "20%",left: "2%",right: "2%",};}// 4K 带鱼屏else if (clientWidth <= 3840 && clientHeight <= 1080) {console.log("4K 带鱼屏")objFun.fontSize = 20; //文字大小objFun.symbolSize = 15; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 24; //legend方块宽度objFun.itemHeight = 15; //legend方块高度objFun.padding = [0, 60, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "28%",left: "2%",right: "2%",};}// 4Kelse if (clientWidth <= 3840 && clientHeight >= 1080) {console.log("4K尺寸")objFun.fontSize = 30; //文字大小objFun.symbolSize = 20; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 40; //legend方块宽度objFun.itemHeight = 20; //legend方块高度objFun.padding = [0, 150, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "18%",left: "2%",right: "2%",};} return objFun;
});

初始化echarts的时候直接使用：

// 初始化echarts
function initChart(myData8, tss, dcl) {const chartDom = document.getElementById('echarts2');chart = proxy.$echarts.init(chartDom);// let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];let option = {// backgroundColor: "#041D3F",tooltip: {trigger: "axis",axisPointer: {lineStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(0, 255, 233,0)",},{offset: 0.5,color: "rgba(255, 255, 255,1)",},{offset: 1,color: "rgba(0, 255, 233,0)",},],global: false,},},},textStyle: {color: "#fff",fontSize: computedSize.value.fontSize, // 设置字体大小},confine: true, // 限制溢出屏幕外backgroundColor: "rgba(0,0,0,0.5)", // 设置背景颜色padding: [10, 10, 10, 10], // 设置方框的内边距},grid: computedSize.value.grid,legend: {show: true,right: 0,top: 0,itemWidth: computedSize.value.itemWidth,itemHeight: computedSize.value.itemHeight,icon: 'rect',// itemGap: 20, // 调整图例项之间的水平间距textStyle: {color: '#fff',fontSize: computedSize.value.fontSize,// 设置上下居中对齐align: 'center',// verticalAlign: 'middle',// color: "#B6DCF5",// padding: [0, 0, 0, 4],},},xAxis: {data: myData8,axisLabel: {interval: 0,show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: true,lineStyle: {show: true,color: "rgba(54, 153, 255, .4)",},},axisTick: {show: false,},},yAxis: [{name: "单位：KJ",type: "value",nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: [0, 0, 0, 0],},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}, {name: "单位：吨",// offset: -25,type: "value",nameLocation: "end",nameGap: 10, // 控制名称和轴之间的距离nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: computedSize.value.padding,},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}],series: [{name: "能耗",type: "line",showSymbol: true,symbolSize: computedSize.value.symbolSize, //方块大小symbol: "circle",lineStyle: {normal: {color: "#FF8E3C",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#FF8E3C",// borderColor: "#fff",borderWidth: 2,},data: tss, // 折线图的数据},{name: "吞吐量",type: "line",showSymbol: true,symbol: "circle",symbolSize: computedSize.value.symbolSize,lineStyle: {normal: {color: "#00A0E9",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#00A0E9",// borderColor: "#fff",borderWidth: 2,},data: dcl, // 折线图的数据},// {//     name: "已处理",//     type: "line",//     showSymbol: true,//     symbolSize: 8,//     symbol: "circle",//     lineStyle: {//         normal: {//             color: "#02D6B0",//         },//     },//     itemStyle: {//         color: "#02D6B0",//         borderColor: "#fff",//         borderWidth: 2,//     },//     data: ycl, // 折线图的数据// },],};// 使用刚指定的配置项和数据显示图表。chart.setOption(option);window.addEventListener('resize', function () {chart.resize();});}

另外可以加上 监听到页面尺寸变化后刷新页面：

onMounted(() => {window.addEventListener("resize", () => {window.location.reload();});
})

vue+echarts其中一个组件完整写法：

// 装卸能耗分析
<template><div class="all"><div class="all_title"><span class="all_title_txt">装卸能耗分析</span><img class="dateBg" src="../../assets/images/dateBg.png" alt="" oncontextmenu="return false"draggable="false"></div><div class="all_bod" id="echarts2"></div></div>
</template><script setup name="box8">
const { proxy } = getCurrentInstance();
import { ref, reactive, watch, onMounted, onUnmounted, nextTick } from "vue";
// let currentIndex = ref(0)
let chart = ref(null);
let timer = ref(null);const props = defineProps({allData: {type: Object,required: true}
});// 监听 allData 的变化
watch(() => props.allData, (newVal) => {console.log("echarts8接收到值", newVal)let myData8 = [];let tss = [];let dcl = [];// let myData8 = ["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"];// let tss = [60, 80, 20, 40, 60, 40, 50, 50, 60, 32, 52, 55, 60];// let dcl = [40, 55, 50, 60, 30, 20, 60, 30, 20, 10, 30, 20];newVal.forEach(item => {myData8.push(item.time)tss.push(item.energyConsumption)dcl.push(item.thruput)})setTimeout(() => {initChart(myData8, tss, dcl)}, 500)});// window.addEventListener('resize', function () {
//     // const innerWidth = window.innerWidth
//     // const innerHeight = window.innerHeight
//     // console.log("resize", computedSize.value.fontSize)
//     chart.resize();
// });onUnmounted(() => {if (timer.value) clearInterval(timer.value);
})// 计算样式
const computedSize = computed(() => {let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;let objFun = {};// 14寸笔记本if (clientWidth <= 1366) {console.log("14寸笔记本")objFun.fontSize = 12; //文字大小objFun.symbolSize = 3; //节点大小objFun.borderWidth = 1; //线条宽度objFun.itemWidth = 12; //legend方块宽度objFun.itemHeight = 5; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};} // 全高清屏幕else if (clientWidth <= 1920) {console.log("全高清屏幕")objFun.fontSize = 15; //文字大小objFun.symbolSize = 5; //节点大小objFun.borderWidth = 2; //线条宽度objFun.itemWidth = 20; //legend方块宽度objFun.itemHeight = 8; //legend方块高度objFun.padding = [0, 55, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "25%",left: "2%",right: "2%",};}// 2Kelse if (clientWidth <= 2560) {console.log("2K")objFun.fontSize = 18; //文字大小objFun.symbolSize = 10; //节点大小objFun.borderWidth = 3; //线条宽度objFun.itemWidth = 25; //legend方块宽度objFun.itemHeight = 10; //legend方块高度objFun.padding = [0, 50, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "20%",left: "2%",right: "2%",};}// 4K 带鱼屏else if (clientWidth <= 3840 && clientHeight <= 1080) {console.log("4K 带鱼屏")objFun.fontSize = 20; //文字大小objFun.symbolSize = 15; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 24; //legend方块宽度objFun.itemHeight = 15; //legend方块高度objFun.padding = [0, 60, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "28%",left: "2%",right: "2%",};}// 4Kelse if (clientWidth <= 3840 && clientHeight >= 1080) {console.log("4K尺寸")objFun.fontSize = 30; //文字大小objFun.symbolSize = 20; //节点大小objFun.borderWidth = 5; //线条宽度objFun.itemWidth = 40; //legend方块宽度objFun.itemHeight = 20; //legend方块高度objFun.padding = [0, 150, 0, 0]; //右侧单位距离右侧距离objFun.grid = {containLabel: true,bottom: "6%",top: "18%",left: "2%",right: "2%",};}return objFun;
});// 初始化echarts
function initChart(myData8, tss, dcl) {const chartDom = document.getElementById('echarts2');let chart = proxy.$echarts.init(chartDom);// let ycl = [20, 60, 65, 20, 10, 60, 80, 25, 40, 60, 20, 40];let option = {// backgroundColor: "#041D3F",tooltip: {trigger: "axis",axisPointer: {lineStyle: {color: {type: "linear",x: 0,y: 0,x2: 0,y2: 1,colorStops: [{offset: 0,color: "rgba(0, 255, 233,0)",},{offset: 0.5,color: "rgba(255, 255, 255,1)",},{offset: 1,color: "rgba(0, 255, 233,0)",},],global: false,},},},textStyle: {color: "#fff",fontSize: computedSize.value.fontSize, // 设置字体大小},confine: true, // 限制溢出屏幕外backgroundColor: "rgba(0,0,0,0.5)", // 设置背景颜色padding: [10, 10, 10, 10], // 设置方框的内边距},grid: computedSize.value.grid,legend: {show: true,right: 0,top: 0,itemWidth: computedSize.value.itemWidth,itemHeight: computedSize.value.itemHeight,icon: 'rect',// itemGap: 20, // 调整图例项之间的水平间距textStyle: {color: '#fff',fontSize: computedSize.value.fontSize,// 设置上下居中对齐align: 'center',// verticalAlign: 'middle',// color: "#B6DCF5",// padding: [0, 0, 0, 4],},},xAxis: {data: myData8,axisLabel: {interval: 0,show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: true,lineStyle: {show: true,color: "rgba(54, 153, 255, .4)",},},axisTick: {show: false,},},yAxis: [{name: "单位：KJ",type: "value",nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: [0, 0, 0, 0],},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}, {name: "单位：吨",// offset: -25,type: "value",nameLocation: "end",nameGap: 10, // 控制名称和轴之间的距离nameTextStyle: {color: "#B6DCF5",fontSize: computedSize.value.fontSize,align: "center",padding: computedSize.value.padding,},// splitNumber: 5,axisLabel: {show: true,fontSize: computedSize.value.fontSize,color: "#B6DCF5",},axisLine: {show: false,lineStyle: {color: "#7FD6FF",},},axisTick: {show: false,},splitLine: {lineStyle: {color: "rgba(54, 153, 255, .4)",type: "dashed",},},}],series: [{name: "能耗",type: "line",showSymbol: true,symbolSize: computedSize.value.symbolSize, //方块大小symbol: "circle",lineStyle: {normal: {color: "#FF8E3C",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#FF8E3C",// borderColor: "#fff",borderWidth: 2,},data: tss, // 折线图的数据},{name: "吞吐量",type: "line",showSymbol: true,symbol: "circle",symbolSize: computedSize.value.symbolSize,lineStyle: {normal: {color: "#00A0E9",width: computedSize.value.borderWidth, //线条宽度},},itemStyle: {color: "#00A0E9",// borderColor: "#fff",borderWidth: 2,},data: dcl, // 折线图的数据},// {//     name: "已处理",//     type: "line",//     showSymbol: true,//     symbolSize: 8,//     symbol: "circle",//     lineStyle: {//         normal: {//             color: "#02D6B0",//         },//     },//     itemStyle: {//         color: "#02D6B0",//         borderColor: "#fff",//         borderWidth: 2,//     },//     data: ycl, // 折线图的数据// },],};// 使用刚指定的配置项和数据显示图表。chart.setOption(option);let index = 0; // 初始化索引 // 使用定时器定时更新 tooltip 数据if (timer.value) clearInterval(timer.value);timer.value = setInterval(() => {chart.dispatchAction({type: "showTip", // 触发 tooltip 显示seriesIndex: 0, // 触发 tooltip 的系列索引dataIndex: index, // 触发 tooltip 的数据索引});index = (index + 1) % myData8.length; // 更新索引，循环显示数据}, 2000); // 每隔 2 秒更新一次 // 鼠标移入暂停轮播chart.on("mouseover", () => {clearInterval(timer.value);timer.value = null;});// 鼠标移出继续轮播chart.on("globalout", () => {if (timer.value) { clearInterval(timer.value); }timer.value = setInterval(() => {chart.dispatchAction({type: "showTip", // 触发 tooltip 显示seriesIndex: 0, // 触发 tooltip 的系列索引dataIndex: index, // 触发 tooltip 的数据索引});index = (index + 1) % myData8.length; // 更新索引，循环显示数据}, 2000); // 每隔 2 秒更新一次});window.addEventListener('resize', function () {chart.resize();});}</script><style lang="scss" scoped>
* {margin: 0;padding: 0;box-sizing: border-box;
}img {-webkit-user-drag: none;user-drag: none;user-select: none;-ms-user-select: none;
}.all {display: flex;flex-flow: column;justify-content: space-between;width: 100%;height: 100%;// border: 1px solid red;// background-color: pink;.all_title {display: flex;align-items: center;justify-content: space-between;// padding: 0 40px;padding-right: 20px;width: 100%;// height: 44px;color: #A5D8FC;font-size: 16px;background: url("../../assets/images/smallTitBg.png") no-repeat;background-size: 100% 100%;// span {//     transform: translateY(-8px);// }.dateBg {// width: 25px;// height: 25px;cursor: pointer;&:hover {opacity: .8;}}}.all_bod {display: flex;flex-flow: column;width: 100%;// height: calc(100% - 44px);}}// 4K 带鱼屏
@media screen and (max-width: 3840px) and (max-height: 1080px) {.all_title_txt {font-size: 35px;transform: translate(80px, -20px);}.today_tit {font-size: 30px;}.all_title {height: 80px;}.all_bod {height: calc(100% - 80px) !important;}.dateBg {width: 45px;height: 45px;transform: translateY(-10px);}
}// 4K
@media screen and (max-width: 3840px) and (min-height: 1081px) {.all_title_txt {font-size: 50px;transform: translate(80px, -20px);}.today_tit {font-size: 50px;}.all_title {height: 100px;}.all_bod {height: calc(100% - 100px) !important;}.dateBg {width: 55px;height: 55px;transform: translateY(-15px);}
}// 2K
@media screen and (max-width: 2560px) {.all_title_txt {font-size: 35px;transform: translate(70px, -20px);}.today_tit {font-size: 32px;}.all_title {height: 100px;}.all_bod {height: calc(100% - 100px) !important;}.dateBg {width: 40px;height: 40px;transform: translateY(-15px);}
}// 全高清屏幕
@media screen and (max-width: 1920px) {.all_title_txt {font-size: 16px;transform: translate(30px, -10px);}.today_tit {font-size: 16px;}.all_title {height: 50px;}.all_bod {height: calc(100% - 50px) !important;}.dateBg {width: 25px;height: 25px;transform: translateY(-5px);}
}// 14寸笔记本
@media screen and (max-width: 1366px) {.all_title_txt {font-size: 14px;transform: translate(30px, -10px);}.today_tit {font-size: 16px;}.all_title {height: 50px;}.all_bod {height: calc(100% - 50px) !important;}.dateBg {width: 20px;height: 20px;transform: translateY(-5px);}
}
</style>

这篇关于vue大屏可视化：4k带鱼屏、4k、2k、1920*1080、笔记本 全适配方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1137693。

相关文章

Python Dash框架在数据可视化仪表板中的应用与实践记录

Python Dash框架在数据可视化仪表板中的应用与实践记录

《PythonDash框架在数据可视化仪表板中的应用与实践记录》Python的PlotlyDash库提供了一种简便且强大的方式来构建和展示互动式数据仪表板,本篇文章将深入探讨如何使用Dash设计一... 目录python Dash框架在数据可视化仪表板中的应用与实践1. 什么是Plotly Dash？1.1
阅读更多...
Vue中组件之间传值的六种方式（完整版）

Vue中组件之间传值的六种方式（完整版）

《Vue中组件之间传值的六种方式（完整版）》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值（通过事件形式）方
阅读更多...
css中的 vertical-align与line-height作用详解

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》：本文主要介绍了CSS中的`vertical-align`和`line-height`属性，包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案，详细内容请阅读本文，希望能对你有所帮助... 目录vertical-ali
阅读更多...
IDEA中Git版本回退的两种实现方案

IDEA中Git版本回退的两种实现方案

《IDEA中Git版本回退的两种实现方案》作为开发者,代码版本回退是日常高频操作,IntelliJIDEA集成了强大的Git工具链,但面对reset和revert两种核心回退方案,许多开发者仍存在选择... 目录一、版本回退前置知识二、Reset方案：整体改写历史1、IDEA图形化操作（推荐）1.1、查看提
阅读更多...
浅析CSS 中z - index属性的作用及在什么情况下会失效

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性（如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处
阅读更多...
Python实现html转png的完美方案介绍

Python实现html转png的完美方案介绍

《Python实现html转png的完美方案介绍》这篇文章主要为大家详细介绍了如何使用Python实现html转png功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 1.增强稳定性与错误处理建议使用三层异常捕获结构：try: with sync_playwright(
阅读更多...
Java使用多线程处理未知任务数的方案介绍

Java使用多线程处理未知任务数的方案介绍

《Java使用多线程处理未知任务数的方案介绍》这篇文章主要为大家详细介绍了Java如何使用多线程实现处理未知任务数,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 知道任务个数，你可以定义好线程数规则，生成线程数去跑代码说明：1.虚拟线程池：使用 Executors.newVir
阅读更多...
MySQL中闪回功能的方案讨论及实现

MySQL中闪回功能的方案讨论及实现

《MySQL中闪回功能的方案讨论及实现》Oracle有一个闪回（flashback）功能,能够用户恢复误操作的数据,这篇文章主要来和大家讨论一下MySQL中支持闪回功能的方案,有需要的可以了解下... 目录1、 闪回的目标2、 无米无炊一3、 无米无炊二4、 演示5、小结oracle有一个闪回（flashb
阅读更多...
Android App安装列表获取方法(实践方案)

Android App安装列表获取方法(实践方案)

《AndroidApp安装列表获取方法(实践方案)》文章介绍了Android11及以上版本获取应用列表的方案调整,包括权限配置、白名单配置和action配置三种方式,并提供了相应的Java和Kotl... 目录前言实现方案         方案概述一、 androidManifest 三种配置方式
阅读更多...
Vue 调用摄像头扫描条码功能实现代码

Vue 调用摄像头扫描条码功能实现代码

《Vue调用摄像头扫描条码功能实现代码》本文介绍了如何使用Vue.js和jsQR库来实现调用摄像头并扫描条码的功能,通过安装依赖、获取摄像头视频流、解析条码等步骤,实现了从开始扫描到停止扫描的完整流... 目录实现步骤：代码实现1. 安装依赖2. vue 页面代码功能说明注意事项以下是一个基于 Vue.js
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2