数据可视化——大数据报表

最新推荐文章于 2024-07-18 15:25:55 发布

阳哥赚钱很牛

最新推荐文章于 2024-07-18 15:25:55 发布

阅读量1.3k

点赞数

分类专栏：数据可视化大数据文章标签： css html5 html

本文链接：https://blog.csdn.net/m0_57668040/article/details/120091702

版权

大数据同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

数据可视化

1 篇文章 0 订阅

订阅专栏

1、数据可视化项目所需要的技术：

servlet / mysql / html / css / js / jquery / echarts

2、需要引入如下环境依赖：

后端：

mysql-connector-javaxxx.jar

fastjson-xxx.jar

lombok.jar——构建JavaBean的神器

前端：

jquery-xxx.js

echarts-xxx.js

maven：

        <!-- mysql的驱动jar-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.46</version>
        </dependency>
        <!-- json数据格式化的jar-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
            <version>1.2.60</version>
        </dependency>
        <!-- lombok-javabean对象的构建神器-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.10</version>
        </dependency>

前端的js文件引入到目录webapp的js文件夹下：

china.js、echarts.min.js、jquery-2.1.0.js

3、项目构建

controller主要负责和前端进行数据交互，接收前端的请求参数并给前端返回数据，使用json传递。

dao层是数据持久层，主要是连接数据库去查询、添加、修改、删除数据。

将dao层查询回来的表数据使用model层中的java实体类（和数据库表字段对应的JavaBean对象）进行数据封装的。

前端需要一个数据，去请求controller，controller调用service的逻辑处理，service再调用dao层的代码去查询数据，进行逻辑处理，返回逻辑数据。

（后端代码主要给前端返回数据；前端代码包含前端做报表时请求后端需要的依赖）

4、echarts制作可视化报表的步骤

（1）引入echarts的代码

（2）准备一个具备宽高的HTML容器(div)

（3）通过js代码获取准备好的容器元素

（4）通过echarts的封装代码将容器初始化为可以放报表的容器

（5）准备报表

（6）将准备好的报表放到容器中去

  <!-- 第一步 引入echarts源码-->
    <script src="js/echarts.min.js"></script>
    <!-- echarts可以制作图表，如果需要制作地图 那么我们还得需要引入一个地图的插件-->
    <script src="js/china.js"></script>
    <script src="js/jquery-2.1.0.js"></script>
</head>
<body>
<!--把界面整体分成了五块-->
<div class="container">
    <!-- 第二步  准备好的具备宽高的div容器-->
    <div class="month"></div>
    <div class="day"></div>
    <div class="area"></div>
    <div class="hour"></div>
    <div class="age"></div>
</div>

<script>
    //第一个报表 月份报表的制作函数
    function createMonthCharts() {
        //第三步：获取div容器
        var monthEle = document.getElementsByClassName("month")[0];
        //第四步  初始化容器
        var monthInitContiner = echarts.init(monthEle);
        //第五步 ajax获取后端的接口数据
        $.ajax({
            url: "http://localhost:8080/project_charts_war_exploded/month",
            type: "get",
            dataType: "json",
            success: function (data) {
                console.log(data)
                //报表的代码和将报表放到初始化容器的代码必须放到success回调函数中执行
                var option = {
                    xAxis: {
                        type: 'category',
                        data: data.xdata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.ydata,
                        type: 'bar'
                    }]
                };
                //第六步 将报表放入初始化之后的容器
                monthInitContiner.setOption(option);
            }
        })

    }

5、代码

web.xml配置：

<!--当启动JavaWeb项目时，启动成功之后默认在浏览器打开的页面
界面默认路径是在webapp目录下-->
<welcome-file-list>
    <welcome-file>index.html</welcome-file>
</welcome-file-list>

将月份表绘制成折线图：

/**
 * 给前端返回月份访问量对应的数据
 * 其中返回的数据是如下格式
 * xdata:[]
 * ydata:[]
 */
@WebServlet(name = "MonthServlet", value = "/month")
public class MonthServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //查询MySQL数据库的month_pvs表数据
        Connection connection = null;
        PreparedStatement preparedStatement = null;
        ResultSet resultSet = null;
        try {
            //准备两个集合  用来封装 x轴和y轴的数据
            List<String> xdata = new ArrayList<>();
            List<Integer> ydata = new ArrayList<>();
            Class.forName("com.mysql.jdbc.Driver");
            connection = DriverManager.getConnection("jdbc:mysql://192.168.100.4:3306/project", "root", "root");
            preparedStatement = connection.prepareStatement("select * from month_pvs order by month");
            resultSet = preparedStatement.executeQuery();
            //从查询回来的结果中去封装x轴和y轴的数据
            while (resultSet.next()){
                xdata.add(resultSet.getString("month"));
                ydata.add(resultSet.getInt("pvs"));
            }
            /**
             * 下一步 需要将数据返回给前端
             * 前端返回数据的时候
             *   code:状态码
             *   msg :  接口返回的信息
             *   data:数据
             */
            Map<String,Object> map = new HashMap<>();
            map.put("code",200);
            map.put("msg","query success");
            map.put("xdata",xdata);
            map.put("ydata",ydata);
            String jsonString = JSON.toJSONString(map);
            response.setCharacterEncoding("utf-8");
            PrintWriter writer = response.getWriter();
            writer.write(jsonString);
            writer.flush();
        } catch (SQLException | ClassNotFoundException throwables) {
            throwables.printStackTrace();
        }finally {
            if (resultSet!=null){
                try {
                    resultSet.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (preparedStatement!=null){
                try {
                    preparedStatement.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
            if (connection!=null){
                try {
                    connection.close();
                } catch (SQLException throwables) {
                    throwables.printStackTrace();
                }
            }
        }
    }
}

阳哥赚钱很牛

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
数据可视化——大数据报表

1、数据可视化项目所需要的技术：servlet / mysql / html / css / js / jquery / echarts2、需要引入如下环境依赖：后端：mysql-connector-javaxxx.jarfastjson-xxx.jarlombok.jar——构建JavaBean的神器前端：jquery-xxx.jsecharts-xxx.jsmaven：  ...
复制链接

扫一扫