本文主要是介绍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、笔记本 全适配方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
