前端问题解决汇总

文章目录1. 双向滚动条bug解决2.接口调用顺序问题解决3. vue使用模拟数据渲染实现实时波动折线图4.解决数组中对象需要根据标准值进行ok/ng判定的方法5.实现坐标轴内与坐标轴外是不同的背景颜色解决大量节点渲染问题1. 双向滚动条bug解决问题双向滚动条交汇处有白色背景解决办法-webkit-scrollbar-corner在滚动条中属于边角也就是两个滚动条的交汇处设置该伪类元素背景颜色就能够解决问题。::-webkit-scrollbar-corner { background:transparent; }2.接口调用顺序问题解决问题在实际开发中下拉选择框数据还未加载完成需要使用下拉框选值的接口已经调用了接口调用的顺序有问题解决办法使用$nextTick在data()中定义isLoadding,再在最后一个下拉框调用接口的方法内改变isLoadding的值最后在mounted()中使用该段代码初始化接口nextTick 是异步的回调函数不会立即执行而是等待当前事件循环结束。// 查询 this.$nextTick(() { const checkParentLoaded () { if (this.isLoadingScree true) { this.search(); this.isLoadingScree false; } else { setTimeout(checkParentLoaded, 100); } }; checkParentLoaded(); });3. vue使用模拟数据渲染实现实时波动折线图script import { anomalyArcOption } from /echarts/deviceParamMonitor/devicePage; export default { name: bdsIndex, props: [paramsObj], watch: {}, data() { return { // ... existing code ... anomalyArcOptions: {}, arcObjOptions: {}, simulationTimer: null, // 添加模拟数据的定时器 simulationData: { // 模拟数据对象 dataList: [], xAxisName: [], lslList: [], uslList: [] }, dataPointCount: 30, // 数据点数量 isSimulating: false // 是否正在模拟数据 }; }, mounted() { this.hbIndexInitData(); // 初始化模拟数据 this.initSimulationData(); }, beforeDestroy() { // 清除定时器 if (this.simulationTimer) { clearInterval(this.simulationTimer); this.simulationTimer null; } this.closeWebSocket(); if (this.wsTimer) { clearInterval(this.wsTimer); } }, methods: { // 初始化模拟数据 initSimulationData() { // 创建X轴数据 const xAxisName Array.from({ length: this.dataPointCount }, (_, i) (i 1).toString()); // 创建上下限 const lslValue 40; const uslValue 200; const lslList Array(this.dataPointCount).fill(lslValue); const uslList Array(this.dataPointCount).fill(uslValue); // 创建三条数据线的初始数据 const dataList [ { name: xxx#1 QQQ, value: this.generateRandomDataArray(lslValue, uslValue, 0.8) }, { name: xxx#2 QQQ, value: this.generateRandomDataArray(lslValue, uslValue, 0.7) }, { name: xxx#3 QQQ, value: this.generateRandomDataArray(lslValue, uslValue, 0.9) } ]; // 保存模拟数据 this.simulationData { dataList, xAxisName, lslList, uslList }; // 更新图表 this.updateChartWithSimulationData(); // 开始模拟数据更新 this.startSimulation(); }, // 生成随机数据数组 generateRandomDataArray(min, max, stabilityFactor 0.8) { // 生成一个随机基准值在上下限范围内 const baseValue min Math.random() * (max - min) * 0.6 (max - min) * 0.2; // 生成随机数据点 return Array.from({ length: this.dataPointCount }, () { // 随机波动范围stabilityFactor越大波动越小 const fluctuation (max - min) * (1 - stabilityFactor) * (Math.random() - 0.5); return Math.max(min, Math.min(max, baseValue fluctuation)); }); }, // 更新图表数据 updateChartWithSimulationData() { // 创建图表配置对象 const arcObj { serviceData: this.simulationData.dataList.map(item ({ name: item.name, value: item.value.map(val ({ checkValue: val, paramType: item.name, checkTime: new Date().toLocaleString(), checkResult: val this.simulationData.lslList[0] || val this.simulationData.uslList[0] ? NG : OK })) })), lslList: this.simulationData.lslList, uslList: this.simulationData.uslList, xAxisName: this.simulationData.xAxisName }; // 保存配置 this.arcObjOptions arcObj; // 更新图表 this.anomalyArcOptions anomalyArcOption(arcObj); }, // 开始模拟数据更新 startSimulation() { if (this.isSimulating) return; this.isSimulating true; // 设置定时器每秒更新一次数据 this.simulationTimer setInterval(() { this.updateSimulationData(); }, 1000); }, // 停止模拟数据更新 stopSimulation() { if (this.simulationTimer) { clearInterval(this.simulationTimer); this.simulationTimer null; } this.isSimulating false; }, // 更新模拟数据 updateSimulationData() { // 获取当前数据 const { dataList, lslList, uslList } this.simulationData; // 为每条线更新数据 dataList.forEach(series { // 移除第一个数据点 series.value.shift(); // 获取最后一个数据点作为基准 const lastValue series.value[series.value.length - 1]; const lslValue lslList[0]; const uslValue uslList[0]; // 生成新的数据点基于上一个值进行小幅波动 const fluctuation (uslValue - lslValue) * 0.05 * (Math.random() - 0.5); let newValue lastValue fluctuation; // 确保新值在合理范围内 newValue Math.max(lslValue * 0.9, Math.min(uslValue * 1.1, newValue)); // 添加新数据点 series.value.push(newValue); }); // 更新图表 this.updateChartWithSimulationData(); }, clickChangeName(item) { this.checkResultParam item; // 如果在模拟模式生成新的模拟数据 if (this.isSimulating) { // 更新模拟数据使用不同的稳定因子来模拟不同参数的特性 const stabilityFactor Math.random() * 0.3 0.6; // 0.6-0.9之间的随机值 const lslValue 40; const uslValue 200; this.simulationData.dataList.forEach(series { series.value this.generateRandomDataArray(lslValue, uslValue, stabilityFactor); }); this.updateChartWithSimulationData(); return; } // 否则使用原有逻辑 this.getArcData(); }, // 初始化渲染页面 hbIndexInitData() {在这里插入代码片 // 添加测试数据初始化 this.$nextTick(() { // 如果需要立即启动模拟可以在这里调用 // this.initSimulationData(); }); }, }, }; /script4.解决数组中对象需要根据标准值进行ok/ng判定的方法obj与stanValue中需要有相同的属性stanValue中是标准值的范围。function isObjOk(obj, stanValue) { // 只判断stanValue中有定义的字段 return Object.keys(stanValue).every((key) { // if(key get) { // key getValue; // 特殊处理get字段 // } let val parseFloat(obj[key]); let min stanValue[key].standardMin; let max stanValue[key].standardMax; // 跳过未填写的字段 if (isNaN(val)) return false; return val min val max; }); } // 统计ok数量和比例 function calcOkNg(arr, stanValue) { let okNum arr.filter((obj) isObjOk(obj, stanValue)).length; return { okNum: okNum, okRate: arr.length ? okNum / arr.length : 0, }; }5.实现坐标轴内与坐标轴外是不同的背景颜色注:使用跟grid同级的backgroundColor和grid.backgroundColor实现了开始问了ai很多遍但是一直没有效果只实现了外部的背景色最后看官方文档才发现需要配套show使用。backgroundColor: #f8f8f8, grid: { left: 1%, right: 4%, bottom: 20%, containLabel: true, show: true, backgroundColor: #ffffff, //backgroundColor需要跟showtrue配套使用 },解决大量节点渲染问题const sliceRender (data, renderFn, chunkSize 10) { if (!data || !Array.isArray(data) || data.length 0) return; let index 0; // 兼容性调度器 const schedule window.requestIdleCallback || ((cb) { const start Date.now(); return setTimeout(() { cb({ timeRemaining: () Math.max(0, 50 - (Date.now() - start)), didTimeout: false }); }, 1); }); function _run() { schedule((idle) { // 当每一帧有剩余时间或者任务还没做完时执行 while ((idle.timeRemaining() 0 || idle.didTimeout) index data.length) { const limit Math.min(index chunkSize, data.length); for (; index limit; index) { renderFn(data[index], index); } } if (index data.length) { _run(); // 递归下一帧继续 } }); } _run(); };eg:// 假设有 10000 条数据 const bigData new Array(10000).fill(0).map((_, i) ({ id: i, name: 数据 i })); // 渲染函数把一条数据渲染到页面 function renderItem(item, index) { const div document.createElement(div); div.textContent item.name; document.body.appendChild(div); } // 使用切片渲染 sliceRender(bigData, renderItem, 10);