热词云

需要echarts 和 echarts-wordcloud以及jquery

<html>
<head>
    <meta charset="utf-8">
    <script type="text/javascript" src="jquery-3.6.0.min.js"></script>
    <script type="text/javascript" src='echarts.js'></script>
    <script type="text/javascript" src='echart3.js'></script>
    <script type="text/javascript" src='echarts-wordcloud.js'></script>
</head>
<body>
<style>
    html, body, #main {
        width: 100%;
        height: 100%;
        margin: 0;
    }
</style>
<div align="center" id='main' style="width:500px; height:500px">dfdfdfdfdfdfdfdf</div>
<script>
    // const echart3 = require("../resources/echarts3");
    var myChart = echarts3.init(document.getElementById('main'));

    var d;
    $.ajax({
        type:"post",
        url:"hello-servlet",
        dataType:"text",
        // async:false,
        async:false,//同步
        data:
            {
                "n":0
            },
        success:function (params) {
            alert("success");
            d=$.parseJSON(params);
            alert(d);

        },
        error:function (xhr,status,errMsg) {
            alert("false");
        }
    })

    var option = {
        tooltip: {},
        series: [ {
            type: 'wordCloud',
            gridSize: 2,
            sizeRange: [12, 50],
            rotationRange: [-90, 90],
            shape: 'pentagon',
            width: 600,
            height: 400,
            drawOutOfBound: true,
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: d
        } ]
    };

    myChart.setOption(option);

    window.onresize = myChart.resize;

    var div="<table align='center' id='table' border='1'><tr><td style='width: 200px'>关键字</td><td style='width: 400px'>数目</td></tr>"
    for(var i=0;i<d.length;i++){
            div += "<tr><td style='width: 200px'>" + d[i]["name"] + "</td><td style='width: 400px'>" + d[i].value + "</td></tr>";
    }
    div+="</table>"
    $("#main").after(div);



</script>
</body>
</html>

　　

posted @ 2021-06-13 23:10  新古董  阅读(45)  评论(0)    收藏  举报