Echarts：柱状图的第一个柱子超出了y轴

**ECharts: 柱状图的第一个柱子超出了Y轴**

在使用 ECharts 的柱状图时，可能会遇到一个问题：第一个柱子的高度超过了 Y 轴的范围。这种情况下，柱状图中的第一个柱子将被截断，无法完整显示。

本文将介绍如何解决这个问题，并提供示例代码和注释。

**问题原因**

在 ECharts 中，柱状图的高度是根据数据值计算得出的。如果数据值过大，可能会导致 Y 轴的范围不足以容纳第一个柱子的高度，从而导致截断。

**解决方案**

要解决这个问题，我们需要调整 Y 轴的范围，使其能够容纳第一个柱子的高度。有几种方法可以实现：

###1. 手动设置 Y 轴范围我们可以手动设置 Y 轴的范围，确保它能够容纳第一个柱子的高度。

javascript// 手动设置 Y 轴范围option = {
 xAxis: [
 {
 type: 'category',
 data: ['衬衫', '羊毛衫', '雪纺衫', '裙子', '高跟鞋']
 }
 ],
 yAxis: [
 {
 type: 'value',
 name: '数量',
 min:0, // 最小值 max:20, // 最大值 interval:5, // 分隔间隔 axisLabel: {
 formatter: '{value}'
 }
 }
 ],
 series: [
 {
 name: '销量',
 type: 'bar',
 data: [10,12,15,18,20]
 }
 ]
};

javascript// 使用 max 和 min 属性option = {
 xAxis: [
 {
 type: 'category',
 data: ['衬衫', '羊毛衫', '雪纺衫', '裙子', '高跟鞋']
 }
 ],
 yAxis: [
 {
 type: 'value',
 name: '数量',
 max:20, // 最大值 min:0, // 最小值 interval:5, // 分隔间隔 axisLabel: {
 formatter: '{value}'
 }
 }
 ],
 series: [
 {
 name: '销量',
 type: 'bar',
 data: [10,12,15,18,20]
 }
 ]
};

javascript// 使用 axisPointer 配置option = {
 xAxis: [
 {
 type: 'category',
 data: ['衬衫', '羊毛衫', '雪纺衫', '裙子', '高跟鞋']
 }
 ],
 yAxis: [
 {
 type: 'value',
 name: '数量',
 max:20, // 最大值 min:0, // 最小值 interval:5, // 分隔间隔 axisLabel: {
 formatter: '{value}'
 },
 axisPointer: {
 show: true,
 type: 'line'
 }
 }
 ],
 series: [
 {
 name: '销量',
 type: 'bar',
 data: [10,12,15,18,20]
 }
 ]
};