echarts 实时数据展示
1. 构建一个web项目
完成从后台拉取MySQL的数据到前端的准备工作,我自己是用的ssm框架,这里是属于web的工作,不过多赘述。
2.先写一个简单的echarts展示,测试下你的echarts是否可用
1) 到echarts的中文官网上下载ecahrtsde 的4.2最新版,不用去apache上下载,咱们有中文版的,一般下载源代码或者完整版这两种都可以
2)下载好直接放到web/js这个目录里就好了
3)新建一个jsp页面,开始简单的使用echarts
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>数据展示</title>
<script type="text/javascript" src="../js/echarts.js"></script>
</head>
<body>
<h1 align="center">信息展示</h1>
<div id="chartmain" style="width:1000px; height: 800px;"></div>
</body>
<script type="text/javascript">
var base = +new Date(2014, 9, 3);
var oneDay = 24 * 3600 * 1000;
var date = [];
var data = [Math.random() * 150];
var now = new Date(base);
function addData(shift) {
now = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/');
date.push(now);
data.push((Math.random() - 0.4) * 10 + data[data.length - 1]);
if (shift) {
date.shift();
data.shift();
}
now = new Date(+new Date(now) + oneDay);
}
for (var i = 1; i < 100; i++) {
addData();
}
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: date
},
yAxis: {
boundaryGap: [0, '50%'],
type: 'value'
},
series: [
{
name:'成交',
type:'bar',
smooth:true,
symbol: 'none',
stack: 'a',
areaStyle: {
normal: {}
},
data: data
}
]
};
setInterval(function () {
addData(true);
myChart.setOption({
xAxis: {
data: date
},
series: [{
name:'成交',
data: data
}]
});
}, 500);
var myChart = echarts.init(document.getElementById('chartmain'));
myChart.setOption(option);
</script>
</html>
4)写完之后运行一下,看你的web界面是否有图形
如果成功,就可以进行下一步操作了,如果不成,嗯,自己想办法百度吧,一般都能成功
3. 真刀真枪开干,新建一个jsp页面用于实时数据的展示
注释都写在代码里了,好好看看就好了,亲测可用
注意: 自己要根据自己的 js 文件的位置,这里的这个src 自己修改,咱门的位置一般都不一样
<%--
Created by IntelliJ IDEA.
User: Apache_Jerry
Date: 2019/1/17
Time: 17:14
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<title>实时数据展示</title>
<script type="text/javascript" src="../js/echarts.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
</head>
<body>
<h1 align="center">实时数据展示</h1>
<div id="main" style="width: 1200px;height: 800px"></div>
</body>
<%-- echarts 的js代码\ --%>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var option = {
title: {
text: '车流量实时信息'
},
tooltip: {},
legend: {
data:['速度']
},
xAxis: {
type: 'category',
data: []
},
yAxis: {},
series: [{
name: '速度',
type: 'line',
smooth:true,
data: []
}],
dataZoom: [{//这个是设置滚动条的,可以拉动这个滚动条来改变你的图形的显示比例
type: 'slider',
show: true, //flase直接隐藏图形
xAxisIndex: [0],
left: '9%', //滚动条靠左侧的百分比
bottom: -5,
start: 0,//滚动条的起始位置
end: 50 //滚动条的截止位置(按比例分割你的柱状图x轴长度)
}]
};
myChart.setOption(option);
</script>
<%-- ajax的代码 --%>
<script type="text/javascript">
<%-- 准备进行长连接查询,咱们用这个长连接进行实时的与后台交互 --%>
$(function longPolling(){
// ajax 的异步交互
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/ajax_option.action",
data: "num=0",
error: function (XMLHttpRequest, textStatus, errorThrown) {//请求失败,如果返回错误,根据错误信息进行相应的处理
//再次发起长连接
longPolling();
},
success: function(msg){//请求成功
myChart.setOption({//使用ajax,成功交互的话的就可以使用setOption来改变图表的数据,
xAxis: {
data: msg[0]
},
series: [{
data: msg[1]
}]
});
//再次调用长连接
longPolling();
}
});
})
</script>
</html>
4.咱们光有jsp是不够的,来看看我的后端程序
我的用的是ssm框架,从MySQL查询出来的数据被我用一个java bean封装起来了.
这个是我的controller层的代码:
虽然注释写的比较详细,但是有些东西还是要讲一下,echarts 的 Option里面的横纵坐标的data,都是数组的数据结构, 如果我们最好在后端把数据封装好,然后再传到jsp中,这样做比直接在前段封装数据要好得多
哦.还有,使用ajax是要用 jquery 到的,自己下载好放到 echarts.js一个目录下就行了
package cn.qphone.chinanet.web.controller;
import cn.qphone.chinanet.pojo.Echarts_traffic;
import cn.qphone.chinanet.service.Echarts_traffic_service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
/**
* @description 使用 Echarts 的Servlet
* @author: 王友俊 apache_jerry@foxmail.com
* @create: 2019-01-17 14:13:12
**/
@Controller
public class EchartsController {
@Autowired
private Echarts_traffic_service echarts_traffic_service;
// ajax 的异步交互 来实时显示
@RequestMapping("/ajax_option")
@ResponseBody
public List ajax_option() {
return getData();//调用方法,将方法返回的值,传给ajax
}
/**
* 工具方法,获取数据库的数据
* @return
*/
public List getData () {
List<Echarts_traffic> list = echarts_traffic_service.selectTraffic();
// 在jsp 的外部,封装好数据吗,然后传进ajax 中
String[] xarr = new String[list.size()];//为了保证不出现空指针
Double[] yarr = new Double[list.size()];
for (int i = list.size() -20 ; i < list.size(); i++) {
xarr[i] = list.get(i).getWindows().substring(34,42);//x轴的数据
yarr[i] = list.get(i).getAspeed();//y轴的数据
}
List list2 = new ArrayList();
list2.add(xarr);
list2.add(yarr);
System.out.println("xxxxxxxxxxxxxxxxxxxxxxxxxxxxx");//写这个是为了自己在控制台检测咱们的异步交互是否是实时进行的,如果是,控制台会一直打印这个xxx
return list2;
}
}
5. 前段展示工作做完了,剩下的就是自己实时的往数据库写数据,然后你的前段页面就会实时的显示,就和心电图似的…
如果你不知道如何实时的处理数据,可以参考这篇文章
https://blog.csdn.net/weixin_43867817/article/details/86548767