项目场景:
使用 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())
}
- 需要用的页面 引入 import {math} from “@/utils/math”;
- 使用:math.divide(需要处理的value,值) 这样就ok啦
例如:我需要将值除以100 math.divide(Number(ruleForm.value.outHousePrice),100)