今天的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="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: ‘低血压‘,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,125,127,128,129,120,122,126,122 ],"echatY2": [ 60,64,63,65,67,68,69,61,66,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>
代码架构:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。