專案問題解決方案及echarts知識點總結
1、低谷值展示為有資料的最小值而不是0,echarts所有曲線沒到時間點的曲線不展示(x軸不到時間點不顯示)；
問題解決方案：
第一項：
資料深拷貝後進行過濾剔除為0的資料,使用Math函式的min方法進行計算。
const arr=[10,12,11,13,14,0]
//資料深拷貝 對資料進行過濾 解構並使用Math.min計算最小值
const min=Math.min(...JSON.parse(JSON.stringify(arr).filter(item => item !==0))
第二項：
結合echarts配置項控制x軸的資料(未到時間x軸資料為null即可)
2、資料每五分鐘一重新整理篩選後不重新整理
問題解決方案:
頁面初始化時設定定時器,資料篩選後返回true或false,通過返回值判斷是否需要重新整理,生命週期結束銷燬時清除計時器清空記憶體
// 計時器正在進行中，退出函式
if (this.intervalId !=null) {
return;
}
// 計時器為空，操作(5分鐘一重新整理)
this.intervalId =setInterval(() =>{
if (!this.isFilter){ 執行操作 }
}, 300000);
//清空計時器及快取
clearInterval(this.intervalId); //清除計時器
this.intervalId =null; //設定為null 清空記憶體
3、級聯選擇器 -- 選中任意一級 -- 不需要必須點選文字前面的單選按鈕 -- 點選後下拉框自動關閉
問題解決方案:
1、重寫級聯選擇器樣式,放大單選按鈕覆蓋至整個選框後將單選按鈕透明度設定為0。
.el-radio__inner{opacity:0}
2、通過refs選中級聯選擇器控制dropDownVisible屬性開關
this.$refs.refHandle.dropDownVisible =false
4、圖例進行顯隱操作 -- 較大的一組資料隱藏後圖表會重新渲染 --圖例進行顯隱操作圖表不重新渲染
問題解決方案:
獲取y軸資料範圍,圖例觸發點選事件時設定y軸最大值
const rangeY = myChart.getModel().getComponent('yAxis').axis.scale._extent //獲取y軸資料範圍 -- 最小值及最大值
myChart.on('legendselectchanged', function (obj) {
option.yAxis.max = rangeY[1] //為y軸最大值賦值
this.setOption(option); //修改配置項
})
5、echarts橫座標 -- 根據資料長度固定x軸顯示幾個
問題解決方案：
根據資料長度,通過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 !=='時'?Math.floor(xaxisData.length/7):0
}
6、echarts防超出
問題解決方案:
通過boundaryGap做留白處理
7、echarts 通過axisPointer(座標軸指示器)控制tooltip(提示)內容顯示 - - 對標題進行處理
xAxis：{
axisPointer:{
label:{
formatter:function (params) {
return ;
}
}
},
}