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

文章目录

• 实现效果
• 模块实现解析
• • 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 ' + '新增: ' + (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空值，排查后发现是导入index.php/tags-301.html" >数据默认最后一行换行，有一行空数据。

            • 解决办法：

               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('p');    // 统计数据    let highFrequentWords = data.filter(word => word.count > 3); // 高频词汇    let mediumFrequentWords = data.filter(word => word.count >= 2 && word.count  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;    });    // 将统计信息添加到特定的 p 中    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('body {display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0;} img {max-width: 90%; max-height: 90%; object-fit: contain;}');    popup.document.write('');}

                • 找到所有TED打卡号的最大值，以得到TED文章的总篇数，然后统计单词总数以及高频词汇、中频词汇和低频词汇的数量，以及梳理频次最多的单词，并将统计信息应用到特定的p中。
                • showLargeImage实现单击图片时，在新窗口中打开，并居中显示。