Vue⼤数据可视化（⼤屏展⽰）解决⽅案：组件库基于Vue （React版），主要⽤于构建⼤屏（全屏）数据展⽰页⾯即数据可视化
官⽹地址： datav.jiaminghi/guide/#%E7%94%A8%E5%89%8D%E5%BF%85%E7%9C%8B
blog.csdn/qq_40282732/article/details/105656848
gitee/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() {
18return {
19// * 定时函数
20      drawTiming: null
21    }
22  },
23  mounted () {
24this.calcRate()
25    window.addEventListener('resize', size)
26  },
27  unMounted () {
28    veEventListener('resize', size)
29  },
30  methods: {
31    calcRate () {
32      const appRef = this.$refs["appRef"]
33      console.log(appRef)
34if (!appRef) return
35// 当前宽⾼⽐
36      const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))
37if (appRef) {
38if (currentRate > baseProportion) {
39// 表⽰更宽
40          scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)
41          scale.height = (window.innerHeight / baseHeight).toFixed(5)
42          ansform = `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          ansform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`
48        }
49      }
50    },
51    resize () {
52      clearTimeout(this.drawTiming)
53this.drawTiming = setTimeout(() => {
54this.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 属性上
8return {
9      chart: null,
10    };
11  },
12  created() {
13    window.addEventListener('resize', this[resizeChartMethod], false);
14  },
15  activated() {
16// 防⽌ keep-alive 之后图表变形
17if (this.chart) {
size()
19    }
20  },
21  beforeDestroy() {
22    veEventListener('reisze', this[resizeChartMethod]);
23  },
数据可视化大屏设计24  methods: {
25// 防抖函数来控制 resize 的频率
26    [resizeChartMethod]: debounce(function() {
27if (this.chart) {
size();
29      }
30    }, 300),
31  },
32 };

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。