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 {
                width: 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',
                    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: [
                        
                            <%
                            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>
效果
：
Day11-百科词云展示

猜你喜欢
