先上图，写了一个echart折线图ajax请求json数据的小demo，帮助自己更好的理解图表知识。
自己写了一段json数据，放在test.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, 10,3,43,5,47,8,39,0,1 ], "echatY2": [ 0 ] }
然后开始写代码
<!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: "test.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: '心率值', max: 140, min: 0, splitNumber: 20, boundaryGap: [0.2, 0.2] }], series: [{ name: '心率', type: 'line', data: y_data }] }, true); } </script> </body> </html>
好了，如果实在实际项目里面，只需要把url的接口换一下即可。
