echarts 让 y轴刻度自适应不要从0开始

在使用 ECharts 创建图表时，有时候我们希望 Y 轴的刻度能够自适应数据范围，而不是从 0 开始。ECharts 提供了多种方式来实现这一需求，下面是一些常见的方法：

方法 1：使用 min 和 max 属性 

你可以通过设置 yAxis 的 min 和 max 属性来手动指定 Y 轴的刻度范围，从而避免它从 0 开始。

option = {

yAxis: {

type: 'value',

min: 'dataMin', // 使用数据的最小值

max: 'dataMax' // 使用数据的最大值

},

series: [{

data: [120, 200, 150, 80, 70, 110, 130],

type: 'line'

}]

};

方法 2：使用 scale 属性

设置 scale 为 true 可以让 Y 轴的刻度自适应数据范围，并且不会固定从 0 开始。

option = {

yAxis: {

type: 'value',

scale: true // 开启自适应刻度

},

series: [{

data: [120, 200, 150, 80, 70, 110, 130],

type: 'line'

}]

};

方法 3：动态计算并设置 min 和 max

如果你希望更加灵活地控制 Y 轴的范围，可以在图表渲染前动态计算并设置 min 和 max。

var data = [120, 200, 150, 80, 70, 110, 130];

var max = Math.max.apply(null, data);

var min = Math.min.apply(null, data);

option = {

yAxis: {

type: 'value',

min: min, // 设置最小值

max: max // 设置最大值

},

series: [{

data: data,

type: 'line'

}]

};

方法 4：使用 dataZoom 实现交互式缩放

如果你希望用户能够交互式地调整 Y 轴的显示范围，可以使用 dataZoom。这不仅可以避免从 0 开始，还可以提供更好的用户体验。

option = {

yAxis: {

type: 'value',

scale: true // 自适应数据范围，但不从0开始（如果需要）

},

dataZoom: [ // 使用 dataZoom 实现交互式缩放

{

type: 'slider', // 使用滑动条进行缩放操作

xAxisIndex: 0 // 控制 x 轴的缩放范围，如果有多个 xAxis，可以指定索引

}

],

series: [{

data: [120, 200, 150, 80, 70, 110, 130],

type: 'line'

}]

};

选择合适的方法根据你的具体需求和偏好来设置 Y 轴的刻度。这些方法可以帮助你实现 Y 轴刻度的自适应而不固定从 0 开始。