比如图上这种,某类数据落在30分钟之内的次数很多,而一旦超过30min,则可能出现很大的值(比如2小时),请教各位同行,有没有自定义y轴刻度的方法,之前在github上查询同样问题时,pissang大大提出了一个思路:“考虑下根据自己需要映射数据到指定的分布后传入,然后使用 formatter 将坐标轴的刻度值映射回原来的值”,这句话里,映射数据到指定的分布后传入,是什么意思?能举例说明吗?
配置项如下
let data = [10, 200,70,900];
function formatData(arr){
for(let i=0;i<arr.length;i++){
if(arr[i]>10&&arr[i]<=100){
let percent1=(arr[i]-10)/100;
arr[i]=percent1*10+10;
}else if(arr[i]>100&&arr[i]<1000){
let percent2 =(arr[i]-100)/1000;
console.log(percent2);
arr[i]=percent2*10+20;
}
}
return arr;
}
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D']
},
tooltip: {
trigger: 'item',
formatter:function(params) {
let str=params.name+':'+params.value;
if(params.value>=10&¶ms.value<100){
let percent = (params.value-10)/10
let value = Math.round(percent*100+10);
str=params.name+' : '+value;
}else if(params.value>100&¶ms.value<1000){
let percent = (params.value-20)/10;
let value =Math.round(percent*1000+20);
str=params.name+' : '+value;
}
return '<div style="width:70px;height:50px;display:flex;align-items:center">\
<span style="background-color:#D53A35;width:15px;height:15px;display:inline-block;border-radius:50%"></span>\
<span>'+str+'</span>\
</div>'
}
},
yAxis: {
type: 'value',
max:30,
interval:10,
axisLabel:{
formatter:function(value) {
let item='';
if(value==20){
item='100'
}else if(value===30){
item='1000'
}else{
item = 10;
}
return item
}
}
},
series: [{
data: formatData(data),
type: 'bar'
}]
};