echarts 实时数据展示

最新推荐文章于 2024-05-29 11:43:42 发布

Apache_Jerry

最新推荐文章于 2024-05-29 11:43:42 发布

阅读量8.4k

点赞数 9

分类专栏：学习笔记文章标签： echarts 实时展示数据动态异步交互 ajax

本文链接：https://blog.csdn.net/Apache_Jerry/article/details/86549429

版权

学习笔记专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

6. 好啦,讲完了,自己尝试吧,祝你好运!

Apache_Jerry

关注

9
点赞
踩
52

收藏

觉得还不错? 一键收藏
3
评论
echarts 实时数据展示

echarts 实时数据展示1. 构建一个web项目完成从后台拉取MySQL的数据到前端的准备工作,我自己是用的ssm框架,这里是属于web的工作,不过多赘述。2.先写一个简单的echarts展示,测试下你的echarts是否可用1）到echarts的中文官网上下载ecahrtsde 的4.2最新版,不用去apache上下载，咱们有中文版的，一般下载源代码或者完整版这两种都可以2...
复制链接

扫一扫