每日随笔——hive数据分析4

在前面的博客中，我们已经完成了数据的导入，清洗以及将hive数据库中的数据导入到windows系统的mysql数据库

到目前为止，我们已将项目完成了大部分，现在就剩下实现可视化界面，完成柱状图了，这个需要eharts

下面是网址：https://echarts.apache.org/zh/index.html

在里面下载好js文件，导入项目就能实现，这一步和之前的javaweb的架构一样，按照模板导入就可以

下面是一个柱状图的模板

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>Title</title>
    <meta charset="utf-8">
    <script  type="text/javascript" src="js/echarts.min.js"></script>

    <script src="js/jquery-1.7.2.js"></script>
    <script>
        $(function (){
            var div2 = document.getElementById("div2")
            var btn_query = document.getElementById("btn_query");
            var input = document.getElementById("input");
            // 根据选择的时间范围，更新数据并重新绘制图表
            function updateChart(selectedValue) {
                $.ajax({
                    type: "GET",
                    //我需要写一个接口，通过代理商的编号来查询十五天的数据
                    url: "/servlet?sale_nbr="+selectedValue,
                    async: false,
                    success: function (jsonArr) {
                        let day_ids = []
                        let activitys = []
                        var jsonArray = JSON.parse(jsonArr)
                        //然后我们将x轴的 代理商代码取出来
                        for(var i=0;i<jsonArray.length;i++){
                            day_ids[i] = jsonArray[i].day_id
                        }
                        //再把y轴的利润取出来
                        for(var j=0;j<jsonArray.length;j++){
                            activitys[j] = jsonArray[j].sale_number

                        }

                        // var div1 = document.getElementById("div1");
                        var myChart = echarts.init(div2);
                        var option = {
                            title: {
                                text: '代理商活跃度'
                            },
                            tooltip: {},
                            legend: {
                                data: ['活跃度']
                            },
                            xAxis: {
                                data: day_ids
                            },
                            yAxis: {},
                            series: [
                                {
                                    name: '活跃度',
                                    type: 'bar',
                                    data: activitys
                                }
                            ]
                        };
                        myChart.setOption(option);


                    }
                })
            }
            btn_query.onclick = function (){

                var inputValue = input.value;

                updateChart(inputValue);
            }

            $.ajax({
                type: "GET",
                //我需要写一个接口，通过代理商的编号来查询十五天的数据
                url: "/servlet?sale_nbr=O5712",
                async: false,
                success: function (jsonArr) {
                    let day_ids = []
                    let activitys = []
                    var jsonArray = JSON.parse(jsonArr)
                    //然后我们将x轴的 代理商代码取出来
                    for(var i=0;i<jsonArray.length;i++){
                        day_ids[i] = jsonArray[i].day_id
                        console.log( day_ids[i] )
                    }
                    //再把y轴的利润取出来
                    for(var j=0;j<jsonArray.length;j++){
                        console.log(typeof jsonArray[j].sale_number)
                        activitys[j] = jsonArray[j].sale_number
                        console.log(activitys[j])
                    }

                    // var div1 = document.getElementById("div1");
                    var myChart = echarts.init(div2);
                    var option = {
                        color: [ 'red'],
                        title: {
                            text: '活跃度'
                        },
                        tooltip: {},
                        legend: {
                            data: ['活跃度']
                        },
                        xAxis: {
                            data: day_ids
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '活跃度',
                                type: 'bar',
                                data: activitys
                            }
                        ]
                    };
                    myChart.setOption(option);


                }
            })


        })
    </script>
</head>
<body>
<%
    response.setContentType("text/html; charset=utf-8");

%>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div style="text-align: center">
    <input type="text" style="height: 50px;width: 350px;border: 1px solid red" id="input">
    <button style="width: 100px;height: 50px;background-color: burlywood" id="btn_query">数据查询</button>
</div>
<br/>
<div id="div2" style="height: 700px"></div>
</body>
<html>

 

posted @ 2023-09-27 11:45  伽澄  阅读(30)  评论(0)    收藏  举报