Echarts定时异步刷新
在这里，我写了2个Echarts图表，都是定时异步刷新的。每隔20秒向服务器请求一次数据，每8秒渲染一次Echarts图表。效果（gif录制的效果不是很好）：图书每日销售数据的JSON数据(从后台拿到)：{"code":100,"msg":"处理成功！","extend":{"dateArr":["04.15","04.16","04.17","04.18","04.19",...
·
在这里，我写了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>
<!-- 引入 echarts.js -->
<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>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<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>
<!-- 引入 echarts.js -->
<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>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<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>我是写着玩的，仅作参考，祝顺利~
助力广东及东莞地区开发者，代码托管、在线学习与竞赛、技术交流与分享、资源共享、职业发展，成为松山湖开发者首选的工作与学习平台
更多推荐
1
0- 0
已为社区贡献2条内容
所有评论(0)