Vue大数据可视化（大屏展示）解决方案 |
您所在的位置：网站首页 › vue大数据可视化方案 › Vue大数据可视化（大屏展示）解决方案 |
Vue大数据可视化（大屏展示）解决方案
|
DataV：组件库基于Vue （React版） ，主要用于构建大屏（全屏）数据展示页面即数据可视化 官网地址： http://datav.jiaminghi.com/guide/#%E7%94%A8%E5%89%8D%E5%BF%85%E7%9C%8B
https://blog.csdn.net/qq_40282732/article/details/105656848 https://gitee.com/MTrun/big-screen-vue-datav 屏幕适配 mixin 函数 1 // 屏幕适配 mixin 函数 2 3 // * 默认缩放值 4 const scale = { 5 width: '1', 6 height: '1', 7 } 8 9 // * 设计稿尺寸（px） 10 const baseWidth = 1920 11 const baseHeight = 1080 12 13 // * 需保持的比例（默认1.77778） 14 const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5)) 15 16 export default { 17 data() { 18 return { 19 // * 定时函数 20 drawTiming: null 21 } 22 }, 23 mounted () { 24 this.calcRate() 25 window.addEventListener('resize', this.resize) 26 }, 27 unMounted () { 28 window.removeEventListener('resize', this.resize) 29 }, 30 methods: { 31 calcRate () { 32 const appRef = this.$refs["appRef"] 33 console.log(appRef) 34 if (!appRef) return 35 // 当前宽高比 36 const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5)) 37 if (appRef) { 38 if (currentRate > baseProportion) { 39 // 表示更宽 40 scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5) 41 scale.height = (window.innerHeight / baseHeight).toFixed(5) 42 appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` 43 } else { 44 // 表示更高 45 scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5) 46 scale.width = (window.innerWidth / baseWidth).toFixed(5) 47 appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` 48 } 49 } 50 }, 51 resize () { 52 clearTimeout(this.drawTiming) 53 this.drawTiming = setTimeout(() => { 54 this.calcRate() 55 }, 200) 56 } 57 }, 58 } 使用：
大屏防抖： 1 // 混入代码 resize-mixins.js 2 import { debounce } from '@/utils'; 3 const resizeChartMethod = '$__resizeChartMethod'; 4 5 export default { 6 data() { 7 // 在组件内部将图表 init 的引用映射到 chart 属性上 8 return { 9 chart: null, 10 }; 11 }, 12 created() { 13 window.addEventListener('resize', this[resizeChartMethod], false); 14 }, 15 activated() { 16 // 防止 keep-alive 之后图表变形 17 if (this.chart) { 18 this.chart.resize() 19 } 20 }, 21 beforeDestroy() { 22 window.removeEventListener('reisze', this[resizeChartMethod]); 23 }, 24 methods: { 25 // 防抖函数来控制 resize 的频率 26 [resizeChartMethod]: debounce(function() { 27 if (this.chart) { 28 this.chart.resize(); 29 } 30 }, 300), 31 }, 32 };
|
【本文地址】