解决echarts柱形图数值差距大，极小值渲染问题

对于一个初学者，echarts柱形图渲染极小值，指数类数据，由于数据存在数量级差异太大，导致渲染出这种问题，下图：

在这里插入图片描述

很明显，这不是我想要的效果，经过查看官网实例，如果我给y轴设置一个最大值呢？这个最大值就去数组中最大的数据，

1
2
3
4
5
6

yAxis: [
{
type: 'value',
max:maxNumVal,//给定区间最大
}
]

效果显示:
在这里插入图片描述
这就是我想要的效果，对于值太小以及数量级差异大的数据的处理方法。

源码如下：
xAxis

1
2
3
4
5
6
7
8
9
10
11
12

xAxis: {
type: 'category',
data:echartXaisLabel,//这里是横坐标值
axisLine: {
lineStyle: {
color: '#666666'
}
},
splitLine:{
show:false
}
}

yAxis：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

yAxis: [
{
type: 'value',
axisLabel: {
show:true,
formatter: (value, index) => {
return Number(value).toExponential(2)
}
},
splitLine:{
show:true
},
axisLine: {
show:true,
lineStyle: {
color: '#666666'
}
},
max:maxNumVal,
axisTick:{
show:true,
interval:'0'
}
}
]

series:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

series: [
{
type: 'bar',
barWidth:'60%',
data: data,
barMinHeight:0,
label: {
show: true,
formatter: (params) => {
return params.value;
}
},
itemStyle:{
normal:{
color: function(params){
let colorList = [
'#C1232B','#B5C334','#FCCE10','#E87C25','#27727B','#FE8463','#9BCA63',
'#FAD860','#F3A43B','#60C0DD','#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
];
return colorList[params.dataIndex]
},
label:{
show:true,
position:'top',
textStyle:{
color:'black',
fontSize:10
}
}
}
}
}
]

给定一个颜色输入循环渲染在label上

以上为本次问题解决的过程。

echarts官网: https://echarts.apache.org/examples/zh/index.html#chart-type-bar.