项目问题解决方案及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 ;
　　　　　　　　　　}
　　　　　　　　}
　　　　　}
}