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 ;
}
}
},
}