实现阶段-页面实现

最新推荐文章于 2024-11-12 15:23:24 发布

❤️啵啵啵

最新推荐文章于 2024-11-12 15:23:24 发布

阅读量368

点赞数

CC 4.0 BY-SA版权

分类专栏：数据可视化

本文链接：https://blog.csdn.net/qq_44370562/article/details/104731479

数据可视化专栏收录该内容

1 篇文章

订阅专栏

将数据存储到数据库后，通过选择图形来查看以何种图形来展示数据。

三，首页：index.html

提供三种图形的选择页面，分别输入查看数据的要求，页面动态的使用ajax构建Http请求，Tomcat根据请求的url使用特定的Servlet来连接数据库将数据以json格式构建Http响应，当页面获取到数据后，使用echarts将数据以特定的图形进行显示。

二，诗词词云分布图：words.html

1，用户在文本框中输入查看唐诗中出现词平频率最高的词。页面通过ajax发起Htpp请求。

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>诗词词云分布图</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.min.js"></script>
<script src="js/echarts-wordcloud.min.js"></script>

<script>
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return unescape(r[2]); return null;
    }
</script>
<script>
    var count=GetQueryString('count');
    $.ajax({
        method: "get",
        url: "words?count="+count,
        dataType: "json",
        success: function (jsonData) {
            var names = [];
            var counts = [];

            for (var i in jsonData) {
                names.push(jsonData[i][0]);
                counts.push(jsonData[i][1]);
            }

            console.log(names);
            console.log(counts);
            var myChart = echarts.init(document.getElementById('main'));
            var data = [];
            for (var i in jsonData) {
                var word = jsonData[i][0];
                var count = jsonData[i][1];
                data.push({
                    name: word,
                    value: count,
                    textStyle: {
                        normal: {},
                        emphasis: {}
                    }
                });
            }
            console.log(data);
            var option = {
                title: {
                    text: '诗词词云分布图',
                    left: 'center',
                },
                series: [{
                    type: 'wordCloud',
                    shape: 'pentagon',
                    left: 'center',
                    top: 'center',
                    width: '80%',
                    height: '80%',
                    right: null,
                    bottom: null,
                    sizeRange: [12, 60],
                    rotationRange: [-90, 90],
                    rotationStep: 45,
                    gridSize: 8,
                    drawOutOfBound: false,
                    textStyle: {
                        normal: {
                            fontFamily: 'sans-serif',
                            fontWeight: 'bold',
                            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: data
                }]
            };

            myChart.setOption(option);
        }
    });
</script>

</body>
</html>

2，通过WordsServlet对用户得到请求进行处理，从数据库中获取到指定数量的出现频率最高的词。并将数据以json的格式返回。

package api;

import Dao.DBUtil;
import com.alibaba.fastjson.JSONArray;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.*;

/**
 * @ClassName WordsServlet
 * @Description TODO
 * @Auther danni
 * @Date 2020/3/6 18:43]
 * @Version 1.0
 **/

public class WordsServlet extends HttpServlet {
    class tangshi{
        String title;
        int count;

        public tangshi(String title, int count) {
            this.title = title;
            this.count = count;
        }
    }
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String count=req.getParameter("count");
        if(count==null){
            count="5";
        }
        Connection connection=null;
        PreparedStatement statement=null;
        ResultSet set=null;
        Map<String,Integer> map=new HashMap<>();
        try {
            connection=DBUtil.getConnection();
            String sql01="select words from tangshi";
            statement=connection.prepareStatement(sql01);
            set=statement.executeQuery();
            while(set.next()){
                String word=set.getString("words");
                String[] words=word.split(" ");
                for(String ss:words){
                    map.put(ss,map.getOrDefault(ss,0)+1);
                }
            }
            List<tangshi> list=new ArrayList<>();
            for(String ss:map.keySet()){
                list.add(new tangshi(ss,map.get(ss)));
            }
            Collections.sort(list, new Comparator<tangshi>() {
                @Override
                public int compare(tangshi o1, tangshi o2) {
                    return o2.count-o1.count;
                }
            });
            JSONArray array=new JSONArray();
            Integer num=Integer.valueOf(count);
            for(tangshi t:list){
                JSONArray item=new JSONArray();
                item.add(t.title);
                item.add(map.get(t.title));
                array.add(item);
                num--;
                if(num==0){
                    break;
                }
            }
            resp.setContentType("application/json; charset=utf-8");
            resp.getWriter().write(array.toJSONString());
        }catch (SQLException e) {
            e.printStackTrace();
            resp.setContentType("text/html;charSet=utf-8");
            resp.getWriter().write("error");
        }finally {
            DBUtil.close(connection,statement,set);
        }
    }
}

3，当页面获取到json格式的数据，使用echarts将数据以图形化界面呈现出来。

三，创作数量排行榜-rank.html

1，用户在文本框中输入查看创作唐诗数量的最多的前几位诗人，页面使用ajax构建Http请求。

<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>柱状图</title>
</head>
<body>
<div id="main" style="width: 600px;height:400px;"></div>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echarts-gl.min.js"></script>
<script src="js/echarts-wordcloud.min.js"></script>

<script>
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);//search,查询？后面的参数，并匹配正则
        if(r!=null)return unescape(r[2]); return null;
    }
</script>
<script>
    var condition=GetQueryString('condition');
    $.ajax(
        {
            method: "get",  // 发起 ajax 请求时，使用什么 http 方法
            url: "rank?condition="+condition,   // 请求哪个 url
            dataType: "json",   // 返回的数据当成什么格式解析
            success: function (data) {  // 成功后，执行什么方法
                var names = [];
                var counts = [];

                for (var i in data) {
                    names.push(data[i][0]);
                    counts.push(data[i][1]);
                }

                console.log(names);
                console.log(counts);
                var myChart = echarts.init(document.getElementById('main'));

                var option = {
                    // 图标的标题
                    title: {
                        text: '创作数量排行榜',
                    },
                    tooltip: {},
                    legend: {
                        data:['数量'],
                    },
                    // 横坐标
                    xAxis: {
                        data: names
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '数量',
                            type: 'bar',    // bar 代表柱状图
                            itemStyle: {
                                color: new echarts.graphic.LinearGradient(
                                    0, 0, 0, 1,
                                    [
                                        {offset: 0, color: '#83bff6'},
                                        {offset: 0.5, color: '#188df0'},
                                        {offset: 1, color: '#188df0'}
                                    ]
                                )
                            },
                            emphasis: {
                                itemStyle: {
                                    color: new echarts.graphic.LinearGradient(
                                        0, 0, 0, 1,
                                        [
                                            {offset: 0, color: '#2378f7'},
                                            {offset: 0.7, color: '#2378f7'},
                                            {offset: 1, color: '#83bff6'}
                                        ]
                                    )
                                }
                            },
                            data: counts
                        }
                    ]
                };
                myChart.setOption(option);
            }
        }
    );
</script>

</body>
</html>

3，RankSerlvlet根据请求的参数，从数据库中根据创作数量获取指定数量的诗人，并将数据以json格式输出。

package api;

/**
 * @ClassName RackonServlet
 * @Description TODO
 * @Auther danni
 * @Date 2020/3/6 9:46]
 * @Version 1.0
 **/
import Dao.DBUtil;
import com.alibaba.fastjson.JSONArray;


import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

public class RankServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws IOException {
        String condition=req.getParameter("condition");
        if(condition==null){
            condition="5";
        }
        Connection connection=null;
        PreparedStatement statement=null;
        ResultSet set=null;
        JSONArray array=new JSONArray();
        try {
            connection=DBUtil.getConnection();
            String sql="SELECT author, count(*) AS cnt FROM tangshi GROUP BY author HAVING cnt >= ? ORDER BY cnt DESC";
            statement=connection.prepareStatement(sql);
            statement.setString(1,condition);
            set=statement.executeQuery();
            while(set.next()){
                String auther=set.getString("author");
                int cnt=set.getInt("cnt");
                JSONArray item=new JSONArray();
                item.add(auther);
                item.add(cnt);
                array.add(item);
            }
            resp.setContentType("application/json; charset=utf-8");
            resp.getWriter().write(array.toJSONString());
        } catch (SQLException e) {
            e.printStackTrace();
            resp.setContentType("text/html;charset=utf-8");
            resp.getWriter().write("error");
        }finally {
            DBUtil.close(connection,statement,set);
        }
    }
}

4，页面获取到json格式的数据后，以柱状图的形式将数据显示出来。