HIVE数据分析-数据化可视化展示

5、数据可视化展示：

利用Echarts将上述统计结果以图形化展示的方式展现出来：饼图、柱状图、地图、折线图等。

界面代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>带背景的柱状图</title>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.5.1.min.js"></script>

</head>
<body>
<div id="barChart" style="width: 800px; height: 400px;"></div>
<div id="detailChart" style="width: 800px; height: 400px;"></div>

<script>
    // 全局变量，用于存储数据集
    var data = [];

    $(document).ready(function() {
        $.ajax({
            url: 'your-backend-api-url',  // 替换为您的后端API地址
            method: 'GET',
            dataType: 'json',
            success: function(responseData) {
                data = responseData;  // 将数据集保存到全局变量中
                renderBarChart(data);
            },
            error: function(error) {
                console.error('Error fetching data:', error);
            }
        });
    });

    function renderBarChart(data) {
        var uniqueDates = [...new Set(data.map(item => item.day_id))];
        var seriesData = [];

        uniqueDates.forEach(date => {
            var series = {
                name: date,
                type: 'bar',
                data: []
            };

            data.forEach(item => {
                if (item.day_id === date) {
                    series.data.push(item.round);
                } else {
                    series.data.push(null);
                }
            });

            seriesData.push(series);
        });

        var option = {
            title: {
                text: '带背景的柱状图'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {
                data: uniqueDates
            },
            xAxis: {
                type: 'category',
                data: uniqueDates
            },
            yAxis: {
                type: 'value'
            },
            series: seriesData
        };

        var myChart = echarts.init(document.getElementById('barChart'));
        myChart.setOption(option);

        // 添加联动和共享数据集功能
        myChart.on('click', function(params) {
            renderDetailChart(params.name);  // 根据参数选择对应日期的详细数据
        });
    }

    function renderDetailChart(date) {
        var filteredData = data.filter(item => item.day_id === date);
        var detailSeriesData = filteredData.map(item => item.round);

        var detailOption = {
            title: {
                text: date + '详细数据'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            xAxis: {
                type: 'category',
                data: filteredData.map(item => item.time)
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name: '数据',
                type: 'bar',
                data: detailSeriesData
            }]
        };

        var detailChart = echarts.init(document.getElementById('detailChart'));
        detailChart.setOption(detailOption);
    }
</script>
</body>
</html>

界面展示

posted @ 2023-09-23 18:14  YE-  阅读(276)  评论(0)  编辑  收藏  举报