1. HTML部分

  1. 创建一个输入框，确定按钮

  2. 数据可视化的盒子

  3. 引入echarts.min.js和ajax.js

    完整代码
    <!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script type="text/javascript" src='ajax.js'></script>
    <script type="text/javascript" src='echarts.min.js'></script>
    <script type="text/javascript" src='echarts_show.js'></script>
</head>
<body>
请输入网址:<input type='text' id='ipt'><br>
<button id='btn'>确定</button>
<br>
<div id="main" style="width: 1700px;height:1500px;"></div>
</body>
</html>

2. NodeJS部分

  1. 创建本地服务器，端口9000

  2. 引入express模块，框架搭建

    完整代码
    const express = require('express');
const server = express();

server.listen(9000);

var index = 0;
const fs = require('fs');
const url = require('url');
const gbk = require('gbk');
const JSDOM = require('jsdom').JSDOM;
const Segment = require('segment');
let seg = new Segment();
seg.useDefault();

server.use('/getMsg',(req,res)=>{
    console.log(req.query);
    GetUrl(req.query.str,(data)=>{
        let DOM = new JSDOM(data);
        let document = DOM.window.document;
        var myHtml = document.querySelector('.read-content').innerHTML.replace(/<[^>]+>/g,'')
        var arr = seg.doSegment(myHtml);
        //去掉没用的
        var myarr = [];
        arr.forEach(data=>{
            if(data.p !=2048){
                myarr.push(data.w)
            }
        });
        var myJson = {};
        myarr.forEach(data=>{
            if(!myJson[data]){
                myJson[data] = 1;
            }
            else{
                myJson[data]++;
            }
        });

        let arr2 = [];
        for(let word in myJson){
            if(myJson[word]<=1){
                continue;
            }
            arr2.push({
                w:word,
                c:myJson[word]
            })
        };
        arr2.sort((json1,json2)=>json2.c-json1.c);
        res.send({'need':arr2});
    })
})

function GetUrl(sUrl,success){
    index++;
    var urlObj = url.parse(sUrl);
    var http ='';
    if(urlObj.protocol == 'http:'){
        http = require('http');
    }
    else{
        http = require('https');
    }

    let req = http.request({
        'hostname':urlObj.hostname,
        'path':urlObj.path
    },res=>{
        if(res.statusCode == 200){
            //var arr = [];
            var str = '';
            res.on('data',buffer=>{
                //arr.push(buffer);
                str +=buffer;
            });
            res.on('end',()=>{
                //let b = Buffer.concat(arr);

                success && success(str);

            })
        }
        else if(res.statusCode == 302 || res.statusCode == 301){
            console.log(`第${index}次重定向`,res.headers.location);
            GetUrl(res.headers.location,success)
        }
        //console.log(res.statusCode,res.headers.location)
    });

    req.end();
    req.on('error',()=>{
        console.log('404了，哥们');
    })
}
server.use(express.static('./'))

3. echarts_show.js

  1. btn的点击事件

    btn['onclick'] = x => {}

  2. ajax发送get请求

  3. 将数据处理为echarts图表的表达

    var json = eval('(' + data + ')').need;
var arr = []
json.forEach(data => {
    arr.push({
        name: data.w,
        value: data.c
    })
});
    完整代码
    var myChart = echarts.init(document.getElementById('main'));
btn['onclick'] = x => {
    ajax({
        url: 'http://localhost:9000/getMsg',
        type: 'get',
        data: {
            str: ipt.value
        },
        success(data) {
            var json = eval('(' + data + ')').need;
            var arr = []
            json.forEach(data => {
                arr.push({
                    name: data.w,
                    value: data.c
                })
            });
            //console.log(arr)

            option = {
                title: {
                    text: '该小说网站的数据',
                    subtext: '纯属虚构',
                    x: 'center'
                },
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },

                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: '55%',
                        center: ['50%', '60%'],
                        data: arr,
                        itemStyle: {
                            emphasis: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            }
                        }
                    }
                ]
            };
            myChart.setOption(option);
        }
    })
}

4. ajax.js部分

  1. 引入封装好的js文件
    function ajax(option){
//    console.log(option.data)
    //{user:leo,pass:123456}
    //user=leo&pass=123456
//    var ajax = new XMLHttpRequest();

    if(window.XMLHttpRequest){
        var ajax = new XMLHttpRequest();
    }
    else{
        var ajax = new ActiveXObject("Microsoft.XMLHTTP");
    };
    if(option.type == 'get'){
        ajax.open(option.type,option.url+'?'+JsonToString(option.data),true);
        ajax.send();
    }
    else if(option.type='post'){
        ajax.open(option.type,option.url,true);
        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        ajax.send(JsonToString(option.data));
    }


    ajax.onreadystatechange=function(){
        //console.log(ajax.readyState)
        if(ajax.readyState == 4){
            if(ajax.status>=200&&ajax.status<300||ajax.status==304){
                option.success(ajax.responseText)
                //console.log()
            }
            else{
                option.error && option.error();
            //    console.log('服务器错误-')
            }
            //console.log(ajax.status)
            //console.log(ajax.responseText)
        }
    }


    function JsonToString(json){
        var arr = [];
        for(var i in json){
            //console.log(i+option.data[i])
            arr.push(i+'='+json[i])
        };
        //console.log(arr.join('&'));
        return arr.join('&');
    }
}