vue3+vite+echarts 实现大屏效果

项目场景：

使用 vue3+vite+echarts 实现大屏效果

不是可视化大屏，所以我这项目没法做自适应，我之前还想着做自适应，然后布局用的flex+百分百。

---

一：form表单选中不回显

问题描述：左上角我用的是form表单写的，点击没有出现下拉选择，选择不回显

原因：我的背景图权重太高，导致点击不显示下拉，form表单中ref和model值一样导致的。

解决方案：改变背景图权重，接着将ref和model改一下，不能一样。

二：父子通信，子组件接收不到值。

问题描述：父组件向子组件传值，子组件拿到的是空数据

原因：父组件跟子组件获取数据是同时进行的，子组件还没有接收到参数，页面就意见加载了。

解决方案：在父组件用一个标识，来进行判断，让它先走完父组件，再走子组件。

在这里我使用的是flag布尔值进行判断，调接口拿到数据之后，将flag值变成true，这样子组件就拿到值了。

新的问题来了，两个统计图数据变化 父组件向子组件传值，父组件值更新，调用子组件方法，拿到的还是旧值。所以我们在选择的时候，需要将flag变为false，然后再调方法。

三：for循环，需要一行展示两个值。

解决方案：

const monthly = (items,i)=>{
    
    
        let arryy = [];
        let oldarr = items;
        for(let y = i; y < oldarr?.length; y++) {
    
    
            if (arryy?.length < 2) {
    
    
                arryy.push(items[y]);
            } else {
    
    
                break;
            }
        }
        return arryy;
}

效果：

这个方法可以拿过去直接用，可以根据自己的需求，变动。

四：修改滚动条样式

参考：https://www.jianshu.com/p/fd4f143cc3e3

解决方案：创建scrollbar.css文件，代码直接粘过去用，然后放入具体的文件当中使用。具体的，看个人需求微调吧。

/*css主要部分的样式*/
/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    
    
    width: 6px; /*对垂直流动条有效*/
    height: 6px; /*对水平流动条有效*/
}

/*定义滚动条的轨道颜色、内阴影及圆角*/
::-webkit-scrollbar-track{
    
    
    border-radius: 4px;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
    /* background-color: rosybrown; */
}

/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb{
    
    
    border-radius: 8px;
    background-color: #DDDEE0;
    /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); */
}

/*定义滑块悬停变化颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb:hover{
    
    
    background-color: #C7C9CC;
}

/*定义两端按钮的样式*/
::-webkit-scrollbar-button {
    
    
    /* background-color: cyan; */
}

/*定义右下角汇合处的样式*/
::-webkit-scrollbar-corner {
    
    
    /* background: khaki; */
}

/* 隐藏滚动条 */
/* ::-webkit-scrollbar {
    display: none;
} */

告诉你们很好用的东西，可以解决计算失真的问题，mathjs，可以进行加减乘除操作,npm下载mathjs

import * as $math from 'mathjs'
export const math = {
    
    
    // +
    add () {
    
    
        return comp('add', arguments)
    },
    // -
    subtract () {
    
    
        return comp('subtract', arguments)
    },
    // x
    multiply () {
    
    
        return comp('multiply', arguments)
    },
    // ÷
    divide () {
    
    
        return comp('divide', arguments)
    }
}

function comp (_func, args) {
    
    
    let t = $math.chain($math.bignumber(args[0]))
    for (let i = 1; i < args.length; i++) {
    
    
        t = t[_func]($math.bignumber(args[i]))
    }
    // 防止超过6位使用科学计数法
    return parseFloat(t.done())
}

1. 需要用的页面 引入 import {math} from “@/utils/math”;
2. 使用：math.divide(需要处理的value,值) 这样就ok啦
   例如：我需要将值除以100 math.divide(Number(ruleForm.value.outHousePrice),100)