关于echart折线图，用到的地方和场景也很多，昨天写的demo,基础之上可以继续扩展，今天的demo是echart多条折线图ajax请求json数据。
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 折线统计图 --> <div class="row"> <div id="main" style="width: 900px; height: 350px; margin-top:80px;"></div> </div> </body> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script> <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script> <script type="text/javascript"> // 折线图 $.ajax({ url: "test.json", data: {}, type: 'GET', success: function(data) { console.log(JSON.stringify(data)) bloodFun(data.echatX, data.echatY,data.echatY2); }, }); // 基于准备好的dom，初始化echarts实例 var bloodChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 function bloodFun(x_data, y_data,y2_data) { bloodChart.setOption({ title: { text: '' }, tooltip: { trigger: 'axis', axisPointer: { type: 'cross', label: { backgroundColor: '#6a7985' } } }, legend: {}, toolbox: { feature: { saveAsImage: {} } }, grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true }, xAxis: [{ type: 'category', boundaryGap: false, data: x_data, }], yAxis: [{ type: 'value' }], series: [{ name: '高血压', type: 'line', areaStyle: { normal: { color: '#fff' //改变区域颜色 } }, itemStyle: { normal: { color: '#8cd5c2', //改变折线点的颜色 lineStyle: { color: '#8cd5c2' //改变折线颜色 } } }, data: y_data }, { name: '低血压', type: 'line', areaStyle: { normal: { color: '#fff' //改变区域颜色 } }, itemStyle: { normal: { color: '#8cd5c2', //改变折线点的颜色 lineStyle: { color: '#8cd5c2' //改变折线颜色 } } }, data: y2_data } ] }); } </script> </html>
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": [ 120,121,123,123,125,127,128,129,120,123,122,126,129,122 ], "echatY2": [ 60,64,63,63,65,67,68,69,61,66,65,68,69,65 ] }
