Vue大数据可视化（大屏展示）解决方案

Vue⼤数据可视化（⼤屏展⽰）解决⽅案：组件库基于Vue （React版），主要⽤于构建⼤屏（全屏）数据展⽰页⾯即数据可视化
官⽹地址： /guide/#%E7%94%A8%E5%89%8D%E5%BF%85%E7%9C%8B
https:///qq_40282732/article/details/105656848
https:///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', 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)
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 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)
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) {
18this.chart.resize()
19 }
20 },
21 beforeDestroy() {
22 window.removeEventListener('reisze', this[resizeChartMethod]);
23 },
24 methods: {
25// 防抖函数来控制 resize 的频率
26 [resizeChartMethod]: debounce(function() {
27if (this.chart) {
28this.chart.resize();
29 }
30 }, 300),
31 },
32 };。