一、柱状图y轴数值的定义
echarts中的柱状图y轴数值指的是图表中y轴的刻度值。它是用来反映数据大小的。
例如：
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
在上述代码中，yAxis的type为’value’，表示y轴使用数值轴。data数组中的每个值就是柱状图的高度，可以理解为图标中的每个矩形的高。
二、y轴数值的刻度区间
echarts会根据传入的数据自动确定y轴的最大值和最小值，以及刻度区间。但是这个自动确定的刻度间隔不一定符合我们的需求，有时候需要我们手动指定。
指定方法有两种：
1.使用yAxis.min和yAxis.max
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
min: 0,
max: 200
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
在上面的代码中，我们手动指定y轴的最小值为0，最大值为200。这样就可以使y轴的刻度区间符合我们的需求。
2.使用yAxis.interval
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value',
interval: 50
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
在上面的代码中，我们手动指定了y轴刻度间隔为50，这样就可以控制y轴刻度的数量。
三、y轴数值的格式化
如果y轴数值是很大的数字，我们希望以K或M为单位显示，或者希望对数值进行保留一定小数位数等，这时候就需要进行y轴数值的格式化。
指定方法如下：
option = {
yAxis: {
type: 'value',
axisLabel: {
formatter: '{value} k'
}
},
series: [{
data: [1200, 2000, 1500, 800, 700, 1100, 1300],
type: 'bar'
}]
};
在上面的代码中，我们在yAxis的axisLabel对象中指定了formatter属性，用于格式化y轴刻度。例如，{value} k表示要在数值后面添加一个k。
四、y轴数值的排序
有时候我们希望按照y轴数值大小进行排序，这时候可以使用sort属性。
指定方法如下：
option = {
yAxis: {
type: 'category',
data: ['D', 'B', 'A', 'C'],
inverse: true,
sort: 'ascending'
},
series: [{
data: [120, 200, 150, 80],
type: 'bar'
}]
};
在上面的代码中，我们指定yAxis的sort属性为’ascending’，表示要升序排列y轴数值。
五、y轴数值的标签样式
有时候我们希望自定义y轴数值标签的样式，例如颜色、字号、字体等。
指定方法如下：
option = {
yAxis: {
type: 'value',
axisLabel: {
textStyle: {
color: '#1E90FF',
fontSize: 16,
fontFamily: 'Microsoft YaHei'
}
}
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
在上面的代码中，我们在yAxis的axisLabel对象中指定了textStyle属性，用于自定义字体样式。
六、总结
通过本文的讲解，我们了解了echarts柱状图y轴数值的定义、刻度区间、格式化、排序和标签样式等方面。这些知识点对我们使用echarts柱状图进行数据可视化非常重要，希望读者能够掌握，并且在实践中灵活运用。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/190580.html
微信扫一扫 
支付宝扫一扫 