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

码农世界 2024-05-23 前端 67 次浏览 0个评论

文章目录

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

🐇html
🐇css

🐇javascript

📚实现效果

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

词云图展现，及点击查看大图

📚模块实现解析

🐇html

搭框架


	
	    咱就是说，成就感拉满！
	    
	  
	
	
	    单词们的词频词云
	    电脑端点击可查看大图。

🐇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 + '个
' + '新增: ' + (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 = `截至目前，
右一同学已经阅读了${totalTedArticles}篇ted。

涉及到了${totalUniqueWords}个单词。假定出现三次以上为高频词，一次以上为中频词。

当前有高频词汇：${highFrequentWords.length} 个，

中频词汇：${mediumFrequentWords.length} 个，

低频词汇：${lowFrequentWords.length} 个。

其中梳理频次最多的单词是:
`; 
    mostFrequentWords.forEach((word, index) => {
        let text = `
"${word.word}"，
出现了${word.count}次，在第${word.numbers.join(', ')}篇TED里都出现了。`
        if (index !== mostFrequentWords.length - 1) {
            text += '
';
        }
        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('');
    popup.document.write(' + img.src + '">');
}