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

文章目录

📚实现效果

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

📚模块实现解析

🐇html

• 搭框架<divclass="count"><divclass="wordcount"><divid="cloudtitle">咱就是说，<span>成就感拉满</span>！</div><divid="line"></div></div><divid="totalcount"></div><divclass="wordcount2"><divid="cloudtitle">单词们的词频<span>词云</span></div><pstyle="font-size: 0.9vw;color: #575656;">电脑端点击可<spanstyle="color: #ecbc41;font-size: 1vw;">查看大图</span>。</p><divid="image"><imgsrc="./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 =newXMLHttpRequest();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');varTED=[];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:newecharts.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];}elseif(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));// 单击放大functionshowLargeImage(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 +'">');}- 找到所有TED打卡号的最大值，以得到TED文章的总篇数，然后统计单词总数以及高频词汇、中频词汇和低频词汇的数量，以及梳理频次最多的单词，并将统计信息应用到特定的div中。- showLargeImage实现单击图片时，在新窗口中打开，并居中显示。