ajax实现异步加载ECharts图表数据
程序员文章站
2022-06-15 18:40:06
html代码
html代码
<div class="layui-row" style="margin-top:0.5rem"> <div style="width:90%;margin:0rem auto 0.7rem auto;font-size:0.28rem"> <div style="background:#3385ff;color:#fff;border-radius:4px;padding:0.08rem 0.2rem;display: inline;margin-left:0.2rem;">体温变化曲线图 / ℃</div> <div style="border:1px solid #3385ff;height:auto;border-radius:4px;box-sizing:border-box;margin-top:-0.18rem;height:3.2rem;"> <div id="tiwen" style="width:100;height:100%;"></div> </div> </div> </div>
js代码
<script type="text/javascript"> // 折线图 $(function () { tiwen(); // 体温 function tiwen() { // 基于准备好的dom,初始化echarts实例 var mychart = echarts.init(document.getelementbyid('tiwen')); option = { title:{ // text:'echars入门' }, grid:{ x:35, y:35, x2:25, y2:40, }, tooltip: { trigger: 'axis' }, xaxis: { type: 'category', data: [], axislabel: { margin: 10, color: '#777', }, axisline: { linestyle: { color: 'rgba(107,107,107,1)', } }, }, yaxis: { type: 'value', splitnumber: 2, scale:true, // mininterval: 1, maxinterval: 3600 * 24 * 1000, axislabel: { color: '#555', margin: 6 }, axisline: { linestyle: { color: 'rgba(107,107,107,0.2)', } }, splitline: { linestyle: { type: 'dashed', color: 'rgba(131,101,101,0.3)' } }, }, series: [{ name: '体温', data: [], type: 'line', linestyle: { normal: { width: 2, color: { type: 'linear', colorstops: [{ offset: 0, color: '#48d8bf' // 0% 处的颜色 }, { offset: 1, color: '#48d8bf' // 100% 处的颜色 }], globalcoord: false // 缺省为 false } } }, itemstyle: { normal: { color: '#48d8bf', bordercolor: "#5b92c9" } }, smooth: true }] }; // 使用刚指定的配置项和数据显示图表。 mychart.setoption(option); window.addeventlistener("resize",function(){ mychart.resize(); }); // 异步加载数据 $.get("gettiwen.html?cardid="+cardid+"").done(function (data) { if (data.code == 200) { // 后台传过来的数据 var createdate = data.data.createdate var tiwen = data.data.tiwen }else{ // 默认值 var createdate = ['03/01','03/02','03/03','03/04','03/05','03/06','03/07'] var tiwen = [62,64,62,63,63,64,63] } // 填入数据 mychart.setoption({ xaxis: { data: createdate }, series: [{ data: tiwen }] }); }); } }) </script>
上一篇: pandas对列求和
下一篇: c# 实现轮询算法实例代码
推荐阅读
-
php+ajax实现无刷新动态加载数据技术
-
详解Vue2+Echarts实现多种图表数据可视化Dashboard(附源码)
-
微信小程序中使用ECharts 异步加载数据的方法
-
小程序中使用ECharts 异步加载数据
-
SpringMVC环境下实现的Ajax异步请求JSON格式数据
-
Android开发实现ListView异步加载数据的方法详解
-
struts2+jquery+json实现异步加载数据
-
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
-
HTML5+JS+JQuery+ECharts实现异步加载问题
-
jQuery+datatables插件实现ajax加载数据与增删改查功能示例