之前做折线图的时候，y轴数据都是写成固定了的，如果是统计步数的话，y轴坐标就要根据走了多少步来自适应了，如果没写的话，就会出现以下的这种情况，折线超出了整个坐标抽，就是一个bug了，只要修改一下属性即可，今天写一下Echarts统计图自适应。
主要属性
代码语言：javascript复制min:0, //就是这两个 最小值
max:'dataMax', //最大值参考demo
代码语言：javascript复制<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" class="col-md-12 col-sm-12 col-xs-12" style="height: 400px;"></div>
<script>
// 折线图
$.ajax({
url: "data.json",
data: {},
type: 'GET',
success: function(data) {
console.log(JSON.stringify(data))
hrFun(data.echatX, data.echatY);
},
});
// 心率
var hrChart = echarts.init(document.getElementById("main"));
function hrFun(x_data, y_data) {
hrChart.setOption({
color: ['#3398DB'],
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data: ['步数值']
},
grid: {
left: '3%',
right: '20%',
bottom: '20%',
containLabel: true
},
xAxis: [{
type: 'category',
data: x_data,
}],
yAxis: [{ // 纵轴标尺固定
type: 'value',
scale: true,
name: '步数值',
min:0, //就是这两个 最小值
max:'dataMax', //最大值
splitNumber: 20,
boundaryGap: [0.2, 0.2]
}],
series: [{
name: '步数',
type: 'line',
data: y_data
}]
}, true);
}
</script>
</body>
</html>json数据
代码语言：javascript复制{
"echatX": [
"2019-07-02",
"2019-07-03",
"2019-07-04",
"2019-07-05",
"2019-07-06",
"2019-07-07",
"2019-07-08",
"2019-07-09",
"2019-07-10",
"2019-07-11",
"2019-07-12",
"2019-07-13",
"2019-07-14",
"2019-07-15"
],
"echatY": [
0,
10000,3,43,5,47,8,39,0,1
],
"echatY2": [
0
]
}就算一天走一万步或者更多，折线图都能根据最大数据来进行相对于的自适应啦。
