今天的demo是echart多条折线图ajax请求json数据
两个文件：1，HTML父文件 test.html 2，请求数据的test.json文件
HTML父文件：
<html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 折线统计图 --> <div class="row"> <div id="main" style=" 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 ] }
部分css样式：
<style> #main{ border: 2px solid #00c2bc; margin: 30px; background: #ffbdc6; border-radius: 10px; box-shadow:7px 7px 7px rgba(101, 30, 231, 0.41); } @-webkit-keyframes anim1 { 0% { Opacity: 0; Font-size: 12px; } 100% { Opacity: 1; Font-size: 24px; } } #main { -webkit-animation-name: anim1; -webkit-animation-duration: 1.5s; -webkit-animation-iteration-count: 4; -webkit-animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; } </style>
代码架构：
