将数据表中的热词统计结果用echarts热词云展示

前提：用DBUtil正确连接数据库，引用相关Js

allcloud.html

 <!-- 内容主体区域 -->
<div id="main" style=" 85%;height: 600px;float:auto"></div>
<script>
    var myChart = echarts3.init(document.getElementById('main'));
    var dt;
    var hzb=new Array(0);
    var zzb=new Array(0);
    $.ajax({
        url : "allCloudServlet",
        async : true,
        type : "post",
        data : {
        },
        dataType : "json",

        success : function(data) {
            dt = data;
            var mydata = new Array(0);
            for (var i = 0; i < dt.length; i++) {
                var d = {};

                d["name"] = dt[i].name;

                d["value"] = dt[i].value;
                mydata.push(d);
                hzb.push(dt[i].name);
                zzb.push(dt[i].value);
            }
            //alert("mydata"+mydata);
            var myChart = echarts3.init(document.getElementById('main'));
            //设置点击效果

            myChart.setOption({
                title: {
                    text: ''
                },
                tooltip: {
                    formatter:function (params){
                        console.log(params);
                        return data.name + " : " +data.value + "次";

                    }
                },
                series: [{
                    type : 'wordCloud',  //类型为字符云
                    shape:'smooth',  //平滑
                    gridSize : 8, //网格尺寸
                    size : ['50%','50%'],
                    //sizeRange : [ 50, 100 ],
                    rotationRange : [-45, 0, 45, 90,60,16], //旋转范围
                    textStyle : {
                        normal : {
                            fontFamily:'微软雅黑',
                            color: function() {
                                return 'rgb(' +
                                    Math.round(Math.random() * 255) +
                                    ', ' + Math.round(Math.random() * 255) +
                                    ', ' + Math.round(Math.random() * 255) + ')'
                            }
                        },
                        emphasis : {
                            shadowBlur : 5,  //阴影距离
                            shadowColor : '#333'  //阴影颜色
                        }
                    },
                    left: 'center',
                    top: 'center',
                    right: null,
                    bottom: null,
                    '100%',
                    height:'100%',
                    data:mydata
                }]
            });


        },
        error : function() {
            alert("请求失败");
        },
    });


</script>
  </div>

allCloudServlet

package servlet;

import com.fasterxml.jackson.databind.ObjectMapper;
import dao.Dao;
import demo.all;
import demo.tiyu;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
@WebServlet("/allCloudServlet")
public class allCloudServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        super.doGet(req, resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<all> list = Dao.getAll();

        //这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合
        // System.out.println(list.toString());

        ObjectMapper mapper = new ObjectMapper();    //提供java-json相互转换功能的类

        String json = mapper.writeValueAsString(list);    //将list中的对象转换为Json格式的数组

        //System.out.println(json);

        //将json数据返回给客户端
        resp.setContentType("text/html; charset=utf-8");
        resp.getWriter().write(json);
    }
}

all.java

package demo;

public class all {
    private String name;
    private String value;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getValue() {
		return value;
	}
	public void setValue(String value) {
		this.value = value;
	}
       
}

Dao.getAll()

 public static ArrayList<all> getAll(){
	        ArrayList<all> list=new ArrayList<>();
	        String sql="select * from alldata";
	        Connection conn= DBUtil.getConn();
	        ResultSet rs =null;
	        PreparedStatement pstmt=null;
	        try {
	            pstmt=conn.prepareStatement(sql);
	            rs=pstmt.executeQuery();
	            while (rs.next()) {
	                all plane = new all();
	                plane.setName(rs.getString("name"));
	                plane.setValue(rs.getString("value"));
	                list.add(plane);
	            }
	            rs.close();
	        } catch (SQLException e) {
	            e.printStackTrace();
	        }
	        finally {
	            DBUtil.close(rs, pstmt, conn);
	        }
	        return list;
	    }

运行截图：

转自：将数据表中的热词统计结果用echarts热词云展示 - 第厘 - 博客园 (cnblogs.com)