前端 | 数据统计及页面数据展现

最新推荐文章于 2025-03-06 14:23:46 发布

啦啦右一

最新推荐文章于 2025-03-06 14:23:46 发布

阅读量1.5k

点赞数 26

分类专栏：右一的开发日记合集文章标签：前端

本文链接：https://blog.csdn.net/m0_63398413/article/details/138572690

版权

右一的开发日记合集专栏收录该内容

85 篇文章

订阅专栏

文章目录

📚实现效果
📚模块实现解析

📚实现效果

折线图分别展现当前累计单词总数及每篇新增单词数，鼠标悬浮读取具体数值。
数值统计
词云图展现，及点击查看大图

📚模块实现解析

🐇html

搭框架

<div class="count">
	<div class="wordcount">
	    <div id="cloudtitle">咱就是说，<span>成就感拉满</span>！</div>
	    <div id="line"></div>
	</div>  
	<div id="totalcount"></div>
	<div class="wordcount2">
	    <div id="cloudtitle">单词们的词频<span>词云</span></div>
	    <p style="font-size: 0.9vw; color: #575656;">电脑端点击可<span style="color: #ecbc41; font-size: 1vw;">查看大图</span>。</p>
	    <div id="image">
	        <img src="./images/wordcloud.png" 
	        alt="词云图" 
	        style="width:90%;
	        aspect-ratio: 16/9; 
	        border: 1.5px solid #ccc; 
	        border-radius: 15px;" 
	        onclick="showLargeImage(this)">
	    </div>
	</div>  
</div>

🐇css

主要是高亮字体的单独设置

body{
    margin: 0;
    padding: 0;
    background-color: #f5f3f2;
}

.count{
    margin: 0 auto;
    /* background-color: pink; */
    position: absolute;
    left: 3%;
    top:8%;
    width: 28%;
    font-family: serif;
    font-size: 1.5vw;
    text-align: center;
}
.count span{
    font-size: 2vw;
    font-family: 'serif';
    color: #ecbc41;
    font-weight: bold;
}
#special{
    font-size: 1.8vw;
    color: #2966cf;
    font-weight: bold;
}

/* 标题 */
#cloudtitle{
    margin: 0 auto;
    margin-top: 35px;
}
#cloudtitle span{
    font-size: 1.5vw;
    margin-bottom: 3px;
    font-weight: bold;
    color: #2966cf;
}

/* 折线图 */
.wordcount{
    width: 100%;
    margin-top: -20px;
}
#line{
    width: 100%;
    height: 300px;
    top: -45px;
}

/* 数据统计 */
#totalcount{
    width: 100%;
    margin-top: -20px;
}

/* 词云图 */
.wordcount2{
    width: 100%;
    /* height: 280px; */
    margin-top: 30px;
}
#image{
    margin: 0 auto;
}

🐇javascript

导入数据及词云图，均来自于之前处理好后导出的数据文件。

折线图部分，套用自可视化 | 【echarts】渐变条形＋折线复合图

var myChart = echarts.init(document.getElementById('line'));
var request = new XMLHttpRequest();
request.open('GET', './word_count.txt', true);

request.onreadystatechange = function() {
    if (request.readyState === 4 && request.status === 200) {
        var rawText = request.responseText;
        var lines = rawText.split('\n');
        var TED = [];
        var counts = [];
        var diffCounts = [];

        // 解析每行的TED打卡号和单词数，并存入相应数组
        lines.forEach(function(line) {
            var data = line.split(' ');
            TED.push(data[0]);
            counts.push(parseInt(data[1], 10));
        });

        for (var i = 0; i < counts.length; i++) {
            if (i === 0) {
                diffCounts.push(0); 
            } else {
                diffCounts.push(counts[i] - counts[i - 1]);
            }
        }

        // 指定图表的配置项和数据
        var option = {
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                return '截至第' + params[0].name + '篇: ' + '单词数'+ params[0].value + '个<br/>' + '新增: ' + (params[1].value !== 0 ? params[1].value : '无数据');
            }
        },
        xAxis: {
            data: TED, 
            axisLine: {
                lineStyle: {
                    color: '#151d29',
                    width: 2
                }
            },
            axisLabel:{
                textStyle: {
                    color: '#333', 
                    fontSize: 8, 
                }
            }
        },
        yAxis: [
            {
                type: 'value',
                show: true,
                interval: 400,
                axisLine: {
                    lineStyle: {
                        color: '#151d29',
                        width: 2
                    }
                },
                axisLabel:{
                    textStyle: {
                        color: '#333', 
                        fontSize: 8, 
                    }
                }
            },
            {
                type: 'value', // 添加第二个Y轴
                show: true,
                interval: 400,
                axisLine: {
                    lineStyle: {
                        color: '#151d29',
                        width: 2
                    }
                },
                axisLabel:{
                    textStyle: {
                        color: '#333', 
                        fontSize: 8, 
                    }
                }
            }
        ],
        series: [
            {
                type: 'line',
                data: counts,
                yAxisIndex: 0,
                itemStyle: {
                    color: '#2966cf'
                }
            },
            {
                type: 'line', 
                data: diffCounts, 
                yAxisIndex: 1,
                itemStyle: {
                    color: '#ecbc41' 
                }
            },
            {
                type: 'bar',
                data: counts,
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#aed0ee' },
                        { offset: 1, color: '#f6f9e4' }
                    ])
                }
            }
        ],
        dataZoom: [
            {
                show: true,
                start: 0,
                end: 100
            },
            {
                type: 'inside',
                start: 0,
                end: 100
            }
        ]
    };
    myChart.setOption(option);
}
};

request.send();

window.addEventListener('resize', function() {
    myChart.resize();
});

注意到折线图最后有NaN空值，排查后发现是导入数据默认最后一行换行，有一行空数据。

解决办法：

 lines.forEach(function(line) {
    var data = line.split(' ');
    // years.push(data[0]);
    // counts.push(parseInt(data[1], 10));
    // 排除引入数据最后的空行
    if (data.length === 2) {
        years.push(data[0]);
        counts.push(parseInt(data[1], 10));
    }
});

实现视口变化图表大小实时更新↓

window.addEventListener('resize', function() {
    myChart.resize();
});

数据统计部分

fetch('./output_word.json')
.then(response => response.json())
.then(data => {
    // 找到所有单词的 numbers 数组中的最大值,最大的文章编号即为总TED文章篇数
    let maxNumber = -Infinity;
    data.forEach(word => {
        let currentMax = Math.max(...word.numbers);
        if (currentMax > maxNumber) {
            maxNumber = currentMax;
        }
    });
    let totalTedArticles = maxNumber; 
    let totalUniqueWords = data.length;
    let mostFrequentWords = data.reduce((max, word) => {
        if (word.count > max[0].count) {
            max = [word];
        } else if (word.count === max[0].count) {
            max.push(word);
        }
        return max;
    }, [{ count: -Infinity }]);

    // 创建显示统计信息的元素
    const statsContainer = document.createElement('div');
    // 统计数据
    let highFrequentWords = data.filter(word => word.count > 3); // 高频词汇
    let mediumFrequentWords = data.filter(word => word.count >= 2 && word.count <= 3); // 中频词汇
    let lowFrequentWords = data.filter(word => word.count === 1); // 低频词汇
    statsContainer.innerHTML = `截至目前，<br><span id='special'>右一同学</span>已经阅读了<span>${totalTedArticles}</span>篇ted。<br><br>涉及到了<span>${totalUniqueWords}</span>个单词。假定出现三次以上为高频词，一次以上为中频词。<br><br>当前有高频词汇：<span id='special'>${highFrequentWords.length} </span>个，<br><br>中频词汇：<span id='special'>${mediumFrequentWords.length} </span>个，<br><br>低频词汇：<span id='special'>${lowFrequentWords.length}</span> 个。<br><br>其中梳理频次最多的单词是:<br>`; 
    mostFrequentWords.forEach((word, index) => {
        let text = `<br><span id='special'>"${word.word}"</span>，<br>出现了<span>${word.count}</span>次，在第<span>${word.numbers.join(', ')}</span>篇TED里都出现了。`
        if (index !== mostFrequentWords.length - 1) {
            text += '<br>';
        }
        statsContainer.innerHTML += text;
    });

    // 将统计信息添加到特定的 div 中
    const countContainer = document.getElementById('totalcount');
    countContainer.appendChild(statsContainer);
})
.catch(error => console.error('无法加载数据:', error));

// 单击放大
function showLargeImage(img) {
    var popup = window.open("", "_blank");
    // 在弹窗中显示原始大小的图片，并通过CSS样式使其居中显示
    popup.document.write('<style>body {display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;} img {max-width: 90%; max-height: 90%; object-fit: contain;}</style>');
    popup.document.write('<img src="' + img.src + '">');
}