echarts中Y轴间距固定，刻度固定，设置最大值

六月初六月初 Echarts 2019-03-01 11:14:23

echarts折线图、柱状图中对Y轴数据刻度固定、间距固定，如果你遇到这样一个需求。你要如何通过代码来实现呢？以下内容详细介绍，如何使用echarts提供的参数来解决这些问题！

主要实现代码：

max: 100,//设置最大值
min: 0,//设置最小值
interval:20,//设置刻度间距

从代码的注释中，可以清楚的知道max既：设置Y轴最大显示的数据；min设置Y轴最小显示的数据；interval强制设置坐标轴分割间隔；

echarts官网对interval的解释：

强制设置坐标轴分割间隔。

因为 splitNumber 是预估的值，实际根据策略计算出来的刻度可能无法达到想要的效果，这时候可以使用 interval 配合 min、max 强制设定刻度划分，一般不建议使用。

完整事例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="https://cdn.staticfile.org/echarts/4.2.0-rc.2/echarts.min.js"></script>
	</head>
	<body>
		<div id="main" style="width: 600px;height:400px;"></div>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));
			// 指定图表的配置项和数据
			option = {
				xAxis: {
					type: 'category',
					data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				},
				yAxis: {
					type: 'value',
					max: 100,
					min: 0,
					interval:20,
				},
				series: [{
					data: [1, 30, 0, 1, 2, 3, 4],
					type: 'line'
				}]
			};
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>
</html>

案例图示：


从图例中，可以看出Y轴被等分成了5份，每份占20！这样便达到了，Y轴固定，刻度固定的需求了！

六月初字帖坊小程序 你想要的字帖模板及工具，这里都有！