Echarts定时异步刷新

xiaoxiao2022-05-11 185

在这里，我写了2个Echarts图表，都是定时异步刷新的。

每隔20秒向服务器请求一次数据，每8秒渲染一次Echarts图表。

效果（gif录制的效果不是很好）：

图书每日销售数据的JSON数据(从后台拿到)：

{"code":100,"msg":"处理成功！","extend":{"dateArr":["04.15","04.16","04.17","04.18","04.19","04.20","04.21","04.22","04.23","04.24","04.25","04.26","04.27","04.28","04.29"],"orderCount":[19,40,7,10,17,17,21,15,10,10,13,11,50,50,50],"salesData":[10982,20104,6003,3579,9354,7405,11603,5141,5451,2559,7882,3220,20453,16833,66103]}}

图书每日销售数据的JSP源代码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% pageContext.setAttribute("DashGoods_PATH", request.getContextPath()); %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="${DashGoods_PATH }/jquery/jquery-3.1.1.min.js"></script> <script src="${DashGoods_PATH }/echarts/echarts3.0/echarts.min.js"></script> </head> <body>  <div id="main" style="width: 800px;height:250px;"></div> <script type="text/javascript"> // 基于准备好的dom，初始化echarts实例 //var myChart = echarts.init(document.getElementById('main')); $(function () { var shopid ='<%=session.getAttribute("sidSession")%>'; var dateArr = ["04.15","04.16","04.17","04.18","04.19","04.20","04.21","04.22","04.23","04.24","04.25","04.26","04.27","04.28","04.29"]; //var dateArr = []; var orderCount = []; var salesData = []; $.ajax({ type : "get", async : false, //必须设置为false，才能实现data的全局变量赋值 url : "${DashGoods_PATH }/shop/admin/getBookSaleDayData?shopid="+shopid, dataType : "json", success : function(result) { if(result.code==100){ dataArr = json_array(result.extend.dateArr); console.info(dateArr); orderCount = json_array(result.extend.orderCount); console.info(orderCount); salesData = json_array(result.extend.salesData); console.info(salesData); } } }); setInterval(function () { //每20秒刷新一次请求 $.ajax({ type : "get", async : false, //必须设置为false，才能实现data的全局变量赋值 url : "${DashGoods_PATH }/shop/admin/getBookSaleDayData?shopid="+shopid, dataType : "json", success : function(result) { if(result.code==100){ dataArr = json_array(result.extend.dateArr); orderCount = json_array(result.extend.orderCount); salesData = json_array(result.extend.salesData); } } }); }, 20000); //json转js数组 function json_array(data){ var len=eval(data).length; var arr=[]; for(var i=0;i<len;i++){ arr[i] = data[i]; } return arr; } /* var dateArr = ['06.12', '06.13', '06.14', '06.15', '06.16', '06.17', '06.18', '06.19', '06.20', '06.21', '06.22', '06.23', '06.24', '06.25', '06.26'], orderCount = [121, 130, 140, 160, 312, 250, 220, 160, 100, 121, 160, 55, 121, 312, 55], salesData = [26541, 24541, 22541, 21541, 19541, 18541, 26541, 36541, 46541, 56541, 60004, 46541, 56541, 60004, 10242];*/ function getDailyBarOption(dateArr, orderCount, salesData) { return { title: { text: '图书每日销售数据' }, color: ['#dedd74', '#4fc0f5'], tooltip: { trigger: 'axis' }, toolbox: { feature: { dataView: { show: false, readOnly: false }, magicType: { show: false, type: ['line', 'bar'] }, restore: { show: false }, saveAsImage: { show: false } } }, grid: { x: 60, x2: 60 }, legend: { data: ['销售额','销售笔数'], top: 'bottom', left: 'center', textStyle: { color: '#fff' } }, xAxis: [ { axisLabel: { interval: 0 }, type: 'category', data: dateArr, axisLine: { lineStyle: { color: '#95a7c5'//设置x轴颜色 } } } ], yAxis: [ { type: 'value', name: '销售笔数', min: 0, axisLine: { lineStyle: { color: '#95a7c5'//设置图形左侧颜色 } }, splitLine: { show: false } }, { type: 'value', name: '销售额', min: 0, axisLine: { lineStyle: { color: '#95a7c5'//设置图形右侧颜色 } }, splitLine: { show: false } } ], series: [ { name: '销售笔数', type: 'line', smooth: true, data: orderCount }, { name: '销售额', type: 'bar', yAxisIndex: 1, data: salesData } ] }; } var dailyBarOption = getDailyBarOption(dateArr,orderCount, salesData); var dailyBarChart = echarts.init(document.getElementById('main')); dailyBarChart.setOption(dailyBarOption); // 基于准备好的dom，初始化echarts实例 setInterval(function () { dailyBarChart.dispose(); $("#daily_sales").html(""); dailyBarChart = echarts.init(document.getElementById('main')); dailyBarChart.setOption(dailyBarOption); }, 8000); }); </script> </body> </html>

2019销售趋势（每月销售数据）的JSON数组：

{"code":100,"msg":"处理成功！","extend":{"dateArr":["1月","2月","3月","4月","5月","6月","7月","8月","9月","10月","11月","12月"],"orderCount":[0,0,0,440,50,0,0,0,0,0,0,0],"salesData":[0,0,0,232832,9296,0,0,0,0,0,0,0]}}

2019销售趋势（每月销售数据）的JSP源码：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% pageContext.setAttribute("DashGoods_PATH", request.getContextPath()); %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts</title>  <script src="${DashGoods_PATH }/jquery/jquery-3.1.1.min.js"></script> <script src="${DashGoods_PATH }/echarts/echarts3.0/echarts.min.js"></script> </head> <body>  <div id="monthly_sales" style="width: 800px;height:250px;"></div> <script> $(function () { var shopid ='<%=session.getAttribute("sidSession")%>'; var dateArr = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']; // orderCount = [121, 130, 140, 160, 312, 250, 220, 160, 100, 121, 160, 55], //salesData = [26541, 24541, 22541, 21541, 19541, 18541, 26541, 36541, 46541, 56541, 60004, 46541]; var orderCount = []; var salesData = []; $.ajax({ type : "get", async : false, //必须设置为false，才能实现data的全局变量赋值 url : "${DashGoods_PATH }/shop/admin/getBookSaleMonthData?shopid="+shopid, dataType : "json", success : function(result) { if(result.code==100){ dataArr = json_array(result.extend.dateArr); console.info(dateArr); orderCount = json_array(result.extend.orderCount); console.info(orderCount); salesData = json_array(result.extend.salesData); console.info(salesData); } } }); setInterval(function () { //每7秒刷新一次请求 $.ajax({ type : "get", async : false, //必须设置为false，才能实现data的全局变量赋值 url : "${DashGoods_PATH }/shop/admin/getBookSaleMonthData?shopid="+shopid, dataType : "json", success : function(result) { if(result.code==100){ dataArr = json_array(result.extend.dateArr); orderCount = json_array(result.extend.orderCount); salesData = json_array(result.extend.salesData); } } }); }, 20000); //json转js数组 function json_array(data){ var len=eval(data).length; var arr=[]; for(var i=0;i<len;i++){ arr[i] = data[i]; } return arr; } function getMonthlyBarOption(dateArr, orderCount, salesData) { return { title: { text: '2019年销售趋势' }, color: ['#dedd74', '#4fc0f5'], tooltip: { trigger: 'axis' }, toolbox: { feature: { dataView: { show: false, readOnly: false }, magicType: { show: false, type: ['line', 'bar'] }, restore: { show: false }, saveAsImage: { show: false } } }, grid: { x: 60, x2: 60 }, legend: { data: ['销售额', '销售笔数'], top: 'bottom', left: 'center', textStyle: { color: '#fff' } }, xAxis: [ { axisLabel: { interval: 0 }, type: 'category', data: dateArr, axisLine: { lineStyle: { color: '#95a7c5'//设置x轴颜色 } } } ], yAxis: [ { type: 'value', name: '销售笔数', min: 0, axisLine: { lineStyle: { color: '#95a7c5'//设置图形左侧颜色 } }, splitLine: { show: false } }, { type: 'value', name: '销售额', min: 0, axisLine: { lineStyle: { color: '#95a7c5'//设置图形右侧颜色 } }, splitLine: { show: false } } ], series: [ { name: '销售笔数', type: 'line', smooth: true, data: orderCount }, { name: '销售额', type: 'bar', yAxisIndex: 1, data: salesData } ] }; } var monthlyBarOption = getMonthlyBarOption(dateArr, orderCount, salesData); var monthlyBarChart = echarts.init(document.getElementById('monthly_sales')); monthlyBarChart.setOption(monthlyBarOption); // 基于准备好的dom，初始化echarts实例 setInterval(function () { monthlyBarChart.dispose(); $("#monthly_sales").html(""); monthlyBarChart = echarts.init(document.getElementById('monthly_sales')); monthlyBarChart.setOption(monthlyBarOption); }, 15000); }); </script> </body> </html>

我是写着玩的，仅作参考，祝顺利~

专利

最新回复(0)