针对echarts yAxis type为value类型时,数据过大和过小显示问题
问题描述
当echarts中折线图展示时,数据中有很大的情况比如15000,也有很小的情况展现比如4,当数据比较分散在极端值时,会造成极小值看不到起伏的情况,让用户误以为没有值。
解决办法
采用log指数型展示,缺点是:10的指数没有0的情况,如果数据中出现0或者小于0的情况,不太好处理,但也可以解决;
1-初始化数据有0的情况,为0.1。
getlinsData(res_lines, model, pname, name) {
if (pname && name) {
res_lines.forEach((item) => {
model.push({
name: item.model,
// 修改地方
data: item[pname][name] === 0?0.1:item[pname][name],
date: item.begin_time,
begin_time: item.begin_time,
end_time: item.end_time
})
})
let isnull = model.every((item) => item.data === 0)
if (isnull) {
this.optionStyle.yAxis.max = 100
} else {
this.optionStyle.yAxis.max = null
}
}
},
2-然后去y轴自定义formatter,把0.1的值换成0
yAxis: {
show: true,
type: 'value',
max: 100,
nameTextStyle: {
color: '#999',
fontSize: 12,
padding: [0, 0, 0, 0] // 调整Y轴
},
axisLine: {
show: false,
lineStyle: {
color: '#eee',
type: 'solid'
}
},
axisLabel: {
show: true,
color: '#666',
fontWeight: 400
// 处理0.1显示问题
formatter: function(value) {
if(value===0.1){
return 0
}else{
return value
}
}
},
axisTick: { show: false },
splitLine: {
show: true,
lineStyle: {
color: '#eee'
}
}
},
网友评论