之前做折线图的时候，y轴数据都是写成固定了的，如果是统计步数的话，y轴坐标就要根据走了多少步来自适应了，如果没写的话，就会出现以下的这种情况，折线超出了整个坐标抽，就是一个bug了，只要修改一下属性即可，今天写一下Echarts统计图自适应。
主要属性
min:0, //就是这两个 最小值 max:'dataMax', //最大值
参考demo
<!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数据
{ "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 ] }
就算一天走一万步或者更多，折线图都能根据最大数据来进行相对于的自适应啦。
