echart多条折线图ajax请求json数据
今天的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: '低血压', 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>
代码架构:
本文作者:Mahmud(مەھمۇد)
本文链接:https://www.cnblogs.com/mahmud/p/11523747.html
版权声明:本作品采用知识共享署名-非商业性使用-禁止演绎 2.5 中国大陆许可协议进行许可。
分类:
标签:
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 凌晨三点救火实录:Java内存泄漏的七个神坑,你至少踩过三个!