原始数据:最大值和最小值差距过大,导致柱状图太丑;
echarts在线编辑示例:
option = {
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
},
series: [
{
data: [1, 2, 20, 101, 500, 1024],//第1步,将1换成1.1进行处理;
type: 'bar',
barMinHeight: '10'
}
]
};
//第1步,将Y轴坐标取对数
option = {
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'log',//第1步,换成log;
min: 1,
logBase: 10,
},
series: [
{
data: [1, 2, 20, 101, 500, 1024],
type: 'bar',
barMinHeight: '10'
}
]
};
第2步,Y轴最小值为1,怎么变成0?Y轴初始值自定义:
option = {
tooltip: {
trigger: 'axis',
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'log',
min: 1,
logBase: 10,
axisLabel: {
formatter: function (value) {
return value === 1 ? 0 : value;//第2步,将y轴最小值1变成从0开始;
}
},
},
series: [
{
//data: [1, 2, 20, 101, 500, 1024],//第1步,将1换成1.1进行处理;
data: [1.1, 2, 20, 101, 500, 1024],
type: 'bar',
barMinHeight: '10'
}
]
};
利用yAxis:axisLabel: formatter: 将Y轴改为从0开始。
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/a53e27878b2dbca92d7b2cd95401a5bb.png)
如果要处理特殊点(0/1)等,还有一种复杂设置:
1.先修改数据(比如0–>0.1;1–>1.1等)
2.修改Y轴显示;
3.渲染之前,将数据修改鼠标悬停数据显示。
option = {
tooltip: {
trigger: 'axis',
//第3步,鼠标悬停时,处理数据1.1显示为1;
formatter:function(params){
let html = params[0].name
params.forEach((item,index)=>{
html+=(`<br/>${item.marker+item.seriesName}: ${item.value===1.1 ? 1 : item.value}`)
})
return html;
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'log',
min: 1,
logBase: 10,
axisLabel: {
formatter: function (value) {
return value === 1 ? 0 : value;//第2步,将y轴最小值1变成从0开始;
}
},
},
series: [
{
//data: [1, 2, 20, 101, 500, 1024],//第1步,将1换成1.1进行处理;
data: [1.1, 2, 20, 101, 500, 1024],
type: 'bar',
barMinHeight: '10'
}
]
};