前端页面源代码如下，可以根据输入数字生成词云，实现图标联动：
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>Title</title> <script th:src="@{/layuimini/js/lay-module/echarts/echarts.js}"></script> <script th:src="@{/layuimini/js/lay-module/echarts/wordcloud.js}"></script> <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" /> <script src="https://www.layuicdn.com/layui/layui.js"></script> <style> .success { background-color: rgba(199, 199, 199, 0.94); } #container1 { box-shadow: 5px 5px 5px 5px #b6b6b6; border-radius: 20px; } #container2 { box-shadow: 5px 5px 5px 5px #b6b6b6; border-radius: 20px; } </style> </head> <body> <div class="main" style="margin: 30px auto"> <p style="text-align: center; font-size: 30px">cvpr顶会热词词云</p> <form class="layui-form"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label"> 数量控制： </label> <div class="layui-input-inline"> <input type="number" name="number" id="number" class="layui-input"> </div> </div> <div class="layui-inline"> <div class="layui-input-inline"> <button type="submit" class="layui-btn" lay-submit lay-filter="demo1">查询</button> </div> </div> </div> </form> <div class="container1" id="container1" style=" 600px; height: 400px; float: left; margin: 70px"></div> <div class="container2" id="container2" style=" 600px; height: 400px; float: left; margin: 70px"></div> <div class="container3" id="container3"> <table class="layui-table" id="table1"> <thead> <tr> <td>序号</td> <td>关键字</td> <td>数量</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>Learning</td> <td>792</td> </tr> <tr> <td>2</td> <td>Image</td> <td>433</td> </tr> </tbody> </table> </div> </div> </body> <script> let mCharts = echarts.init(document.getElementById("container1")); let mCharts2 = echarts.init(document.getElementById("container2")); let option = { title: { text: '热词词云' }, tooltip: {}, series: [{ type : 'wordCloud', //类型为字符云 shape:'smooth', //平滑 gridSize : 8, //网格尺寸 size : ['50%','50%'], //sizeRange : [ 50, 100 ], rotationRange : [-45, 0, 45, 90], //旋转范围 textStyle : { normal : { fontFamily: 'Times New Roman', color: function() { return 'rgb(' + [ Math.round(Math.random() * 160), Math.round(Math.random() * 160), Math.round(Math.random() * 160) ].join(',') + ')'; } }, emphasis : { shadowBlur : 20, //阴影距离 shadowColor : '#ac5c5c' //阴影颜色 } }, left: 'center', top: 'center', right: null, bottom: null, '100%', height:'100%', data:[ {"name": "Learning","value": "792"}, {"name": "Image","value": "433"} ] }] } let option2 = { xAxis: { type: 'category', data: ["Learning", "Image"] }, yAxis: { type: 'value' }, series: [{ name: 'bar', type: 'bar', data: [791, 433] }] } mCharts.setOption(option); mCharts2.setOption(option2); layui.use(['form', 'table'], function () { var form = layui.form, table = layui.table, $ = layui.jquery; form.on('submit(demo1)', function (data) { data = data.field; console.log(data); $.ajax({ url: '/getKeywords', type: 'get', dataType: 'json', data: { number: data.number }, success: function (myData) { // console.log(myData); var keywords = []; var xData = []; var yData = []; var i = 0; $('#table1 tbody tr').remove(); for (var item in myData) { // console.log(myData[item]) keywords.push({name: item, value: myData[item]}) xData.push(item); yData.push(myData[item]); var str = '<tr><td>' + (i+1) + '</td><td>'+item+'</td><td>'+myData[item]+'</td></tr>'; $('#table1 tbody:last').append(str); i++; } option.series[0].data = keywords; option2.xAxis.data = xData; option2.series[0].data = yData; mCharts.setOption(option); mCharts2.setOption(option2); // 设置echarts的点击事件 mCharts.on('click',function (params) { // 获取table下所有的tr let trs = $("#table1 tbody tr"); for (let i = 0;i<trs.length;i++){ // 获取tr下所有的td let tds = trs.eq(i).find("td"); // 先把之前的标记的success去掉 $("#table1 tbody tr").eq(i).removeClass('success'); // 如果点击图示的名字和table下的某一个行的第一个td的值一样 if (params.name == tds.eq(1).text()){ //设置success状态 $("#table1 tbody tr").eq(i).addClass('success'); // 跳转到页面指定的id位置 $("html,body").animate({scrollTop:$("#table1 tbody tr").eq(i).offset().top},1000); } } }); // 当鼠标落在tr时，显示浮动 $("#table1 tbody").find("tr").on("mouseenter",function () { // 获得当前匹配元素的个数 let row = $(this).prevAll().length; // 获得当前tr下td的名字 let name = $("#table1 tbody").find("tr").eq(row).find("td").eq(1).text(); let id = $("#table1 tbody").find("tr").eq(row).find("td").eq(0).text(); // console.log(name) // 设置浮动 // mCharts.series.data[row].label.fontsize = mCharts.series[0].data[row].label.fontsize *20; mCharts.dispatchAction({ type: 'showTip', seriesIndex: 0, dataIndex: id});//选中高亮 }); // 当鼠标移开tr时候取消浮动 $("#table1 tbody").find("tr").on("mouseleave",function () { // 获得当前匹配元素的个数 let row = $(this).prevAll().length; // 获得当前tr下td的名字 let name = $("#table1 tbody").find("tr").eq(row).find("td").eq(1).text(); // 设置浮动 mCharts.dispatchAction({ type: 'hideTip', name:name});//选中高亮 }); } }) return false; }) }) </script> </html>