1混狠、低谷值展示為有數(shù)據(jù)的最小值而不是0,echarts所有曲線沒到時(shí)間點(diǎn)的曲線不展示(x軸不到時(shí)間點(diǎn)不顯示)兔甘；
? ? ? 問題解決方案：
? ? ? ? ? ? ? ? ? ? 第一項(xiàng)：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 數(shù)據(jù)深拷貝后進(jìn)行過濾剔除為0的數(shù)據(jù),使用Math函數(shù)的min方法進(jìn)行計(jì)算绪氛。
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? const arr=[10,12,11,13,14,0]
????????????????????????????????//數(shù)據(jù)深拷貝 對(duì)數(shù)據(jù)進(jìn)行過濾 解構(gòu)并使用Math.min計(jì)算最小值
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?const min=Math.min(...JSON.parse(JSON.stringify(arr).filter(item => item !==0))?
? ? ? ? ? ? ? ? ? ? 第二項(xiàng)：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?結(jié)合echarts配置項(xiàng)控制x軸的數(shù)據(jù)(未到時(shí)間x軸數(shù)據(jù)為null即可)? ? ? ? ? ?
?2欢唾、數(shù)據(jù)每五分鐘一刷新篩選后不刷新
? ? ? ? ?問題解決方案:
? ? ? ? ? ? ? ? ? ? ?頁(yè)面初始化時(shí)設(shè)置定時(shí)器,數(shù)據(jù)篩選后返回true或false,通過返回值判斷是否需要刷新,生命周期結(jié)束銷毀時(shí)清除計(jì)時(shí)器清空內(nèi)存
? ? ? ? ? ? ? ? ? ? ??// 計(jì)時(shí)器正在進(jìn)行中，退出函數(shù)
????????????????????????????if (this.intervalId !=null) {
? ????????????????? ????????????????return;
????????????????????????????}
????????????????????????// 計(jì)時(shí)器為空荞胡，操作(5分鐘一刷新)
????????????????????????this.intervalId =setInterval(() =>{
? ????????????????????????? if (!this.isFilter){ 執(zhí)行操作 }
????????????????????????}, 300000);
????????????????????????//清空計(jì)時(shí)器及緩存
?????????????????????????clearInterval(this.intervalId); //清除計(jì)時(shí)器
? ? ? ? ? ? ? ? ? ? ? ? ? this.intervalId =null; //設(shè)置為null 清空內(nèi)存
3拼缝、級(jí)聯(lián)選擇器 -- 選中任意一級(jí) -- 不需要必須點(diǎn)擊文字前面的單選按鈕 -- 點(diǎn)擊后下拉框自動(dòng)關(guān)閉
? ??????問題解決方案:?
? ? ? ? ? ? ? ? ? ? ? ? 1娱局、重寫級(jí)聯(lián)選擇器樣式,放大單選按鈕覆蓋至整個(gè)選框后將單選按鈕透明度設(shè)置為0。
? ??????????????????????????.el-radio__inner{opacity:0}
? ? ? ? ? ? ? ? ? ? ? ? 2咧七、通過refs選中級(jí)聯(lián)選擇器控制dropDownVisible屬性開關(guān)
? ?????????????????????????????this.$refs.refHandle.dropDownVisible =false
?4衰齐、圖例進(jìn)行顯隱操作 -- 較大的一組數(shù)據(jù)隱藏后圖表會(huì)重新渲染 --?圖例進(jìn)行顯隱操作圖表不重新渲染
? ? ? ? 問題解決方案:
? ? ? ? ? ? ? ? ? ? ? ? 獲取y軸數(shù)據(jù)范圍,圖例觸發(fā)點(diǎn)擊事件時(shí)設(shè)置y軸最大值
? ? ? ? ? ? ? ? ? ? ? ? ?const rangeY = myChart.getModel().getComponent('yAxis').axis.scale._extent //獲取y軸數(shù)據(jù)范圍 -- 最小值及最大值
? ? ? ? ? ? ? ? ? ? ? ? ? ?myChart.on('legendselectchanged', function (obj) {
? ????????????????????????? option.yAxis.max = rangeY[1] //為y軸最大值賦值
? ? ????????????????????????this.setOption(option); //修改配置項(xiàng)
????????????????????????})
? ?5、echarts橫坐標(biāo) -- 根據(jù)數(shù)據(jù)長(zhǎng)度固定x軸顯示幾個(gè)
? ? ? ? ? 問題解決方案：
? ? ? ? ? ? ? ? ? ? ? ? ? ?根據(jù)數(shù)據(jù)長(zhǎng)度,通過interval屬性控制間隔
? ??????????????????????????//控制x軸顯示間隔
????????????????????????????let intervalNum =0
????????????????????????????if (xaxisData.some(item=>item.length>2) && xaxisData[0].indexOf(':')<0){?
? ????????????????????? ????????????intervalNum=xaxisData.length>7?Math.floor(xaxisData.length/7):0
????????????????????????????}else if(xaxisData.some(item=>item.length>2) && xaxisData[0].indexOf(':')>0){??
? ? ????????????????????????????????intervalNum=xaxisData.length>5?Math.floor(xaxisData.length/5):0
????????????????????????????}else {
? ? ? ? ? ? ? ? ? ? ? ? ????? ? ? ? ? intervalNum=xaxisData.length>7 &&this.tableData.desc !=='時(shí)'?Math.floor(xaxisData.length/7):0
????????????????????????????}
6继阻、echarts防超出
? ? ? ? ? ? 問題解決方案:
? ? ? ? ? ? ? ? ? ? ? ? ? ? 通過boundaryGap做留白處理
? 7耻涛、echarts 通過axisPointer(坐標(biāo)軸指示器)控制tooltip(提示)內(nèi)容顯示 - - 對(duì)標(biāo)題進(jìn)行處理
? ??????????xAxis：{
? ? ? ? ? ? ? ? axisPointer:{
? ????????????? ????????????????label:{
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ????? formatter:function (params) {
????????????????????????????????????????????????return ;
? ? ? ? ????????????????????????????????????}
????????????????????????????????????????}
? ? ? ? ? ? ? ? ? ?????????????????},
? ? ? ? ? ? ? ?????????????}? ? ? ??
