zoukankan html css js c++ java

Day11-百科词云展示

调用wordcloud.js在页面中展示单击词汇进入百科。

附代码

<%@page import="java.util.List"%>
<%@page import="my.dao.AllDao"%>
<%@page import="Bean.First"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Comparator"%>
<%@page import="java.util.Collections"%>
<%@page import="javafx.print.Collation"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src='https://cdn.bootcss.com/echarts/3.7.0/echarts.simple.js'></script>
        <script src='js/echarts-wordcloud.js'></script>
<title>在此处插入标题</title>
<% 
        //String name=request.getParameter("name");
        
        AllDao guQuanDao=new AllDao();
    
        List<First> list=guQuanDao.First();
%>
</head>
<body>
<style>
            html, body, #main {
                 100%;
                height: 100%;
                margin: 0;
            }
        </style>
        <div id='main'></div>
</body>
        <script>
            var chart = echarts.init(document.getElementById('main'));

            var option = {
                tooltip: {},
                series: [ {
                    type: 'wordCloud',
                    gridSize: 2,
                    sizeRange: [12, 50],
                    rotationRange: [-90, 90],
                    shape: 'pentagon',
                     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: [
                        
                            <%
                            for(First first:list){
                                
                                
                            %>
                            {
                                name: '<%=first.getWord()%>',
                                value: '<%=first.getNum()%>'
                            },
                            
                            
                            <%
                            }
                            %>
                        
                    ]
                } ]
            };

            chart.setOption(option);
            chart.on('click', function (params) {
                console.log(params.name);
                window.open('https://baike.baidu.com/item/' + encodeURIComponent(params.name));

                });
            window.onresize = chart.resize;
        </script>
</html>

效果

：

查看全文

相关阅读:
1026 Table Tennis (30)
1029 Median
1025 PAT Ranking (25)
1017 Queueing at Bank (25)
1014 Waiting in Line (30)
1057 Stack (30)
1010 Radix (25)
1008 Elevator (20)
字母大小写转换
 Nmap的基础知识

原文地址：https://www.cnblogs.com/1983185414xpl/p/12286612.html