Web jsp开发自学——ajax+servlet+echarts+json+gson 实现ajax传输servlert和echarts的数据，可视化结果

感谢下面的博主，我学习的博客有：

https://blog.csdn.net/ITBigGod/article/details/81023802  Jsp+Servlet+Echarts实现动态数据可视化

Javascript获取html元素的几种方法

https://www.jianshu.com/p/2afc2b3627d7    Echarts柱状图每根柱子设置不同柱子颜色

https://blog.csdn.net/JavaLiXL/article/details/78639103  AJAX处理数据提交到Servlet

https://blog.csdn.net/adventer/article/details/79068498  用Gson实现json与对象、list集合之间的相互转化

https://blog.csdn.net/jal517486222/article/details/82778584   红橙黄绿青蓝紫 RGB值 16进制 、10进制

https://blog.csdn.net/weixin_40325475/article/details/79817482   解决echarts柱形图X轴标题显示不全的问题

………………

1.先搭框架，在html里在js中写echarts的代码

<!-- 引入 echarts.js -->
<script type="text/javascript" src="js/echarts.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>

            <div style="100% ;float:none;display:block; ">
                <!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
                <div id="main" style=" 1100px; height: 340px; margin:0 0 0 0;"></div>
            </div>

js里的柱状图代码

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));

        //3.初始化，默认显示标题，图例和xy空坐标轴
        myChart.setOption({

            title : {
                text : '按学院统计选课人数',
                x:'center',
                y:'top'
            },
            tooltip : {},

            legend : {
                data : [ '人数' ],
                left:'10%',
            },
            xAxis : {
                data : []
            },
            yAxis : {},
            series : [ {
                name : '人数',
                type : 'bar',
                data : []
            } ]
        });

        //4.设置加载动画(非必须)
        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

        //5.定义数据存放数组(动态变)
        var names = []; //建立一个类别数组（实际用来盛放X轴坐标值）
        var nums = []; //建立一个销量数组（实际用来盛放Y坐标值）

        //6.ajax发起数据请求
        $.ajax({
            type : "post",
            async : true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
            url : "TestServlet", //请求发送到TestServlet
            data : {},
            dataType : "json", //返回数据形式为json

            //7.请求成功后接收数据name+num两组数据
            success : function(result) {
                //result为服务器返回的json对象
                if (result) {
                    //8.取出数据存入数组
                    for (var i = 0; i < result.length; i++) {
                        names.push(result[i].name); //迭代取出类别数据并填入类别数组
                    }
                    for (var i = 0; i < result.length; i++) {
                        nums.push(result[i].num); //迭代取出数量并填入销量数组
                    }

                    myChart.hideLoading(); //隐藏加载动画

                    //9.覆盖操作-根据数据加载数据图表
                    myChart.setOption({
                        xAxis : {
                            data : names,
                            axisLabel:{  
                            interval:0,//横轴信息全部显示  
                            }

                        },
                        series : [ {
                            // 根据名字对应到相应的数据
                            name : '人数',
                            data : nums,
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                          '#FF0000','#FF7D00','#FFFF00','#00FF00','#00FFFF',
                                           '#0000FF','#FF00FF','#FAD860','#F3A43B','#60C0DD',
                                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                        ];
                                        return colorList[params.dataIndex];
                                    },            　　
                                }
                            },
                        } ]
                    });

                }

            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
    </script>

js里饼图代码

    <script type="text/javascript">
        var myChart = echarts.init(document.getElementById('main'));
        var user = document.getElementById('xuehao').innerHTML;
        //alert(user);
        //3.初始化，默认显示标题，图例和xy空坐标轴
        myChart.setOption({
               title : {
                    text: '按学院统计选课门数',
                    //subtext: '纯属虚构',
                    x:'center'
                },
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:[]
                },
                toolbox: {
                    show : true,
                    feature : {
                        mark : {show: true},
                        dataView : {show: true, readOnly: false},
                        magicType : {
                            show: true, 
                            type: ['pie', 'funnel'],
                            option: {
                                funnel: {
                                    x: '25%',
                                     '50%',
                                    funnelAlign: 'left',
                                    max: 1548
                                }
                            }
                        },
                        restore : {show: true},
                        saveAsImage : {show: true}
                    }
                },
                calculable : true,
                series : [
                    {
                        name:'选课门数',
                        type:'pie',
                        radius : '65%',
                        center: ['50%', '60%'],
                        data:[]
                    }
                ]
        });

        //4.设置加载动画(非必须)
        myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

        //5.定义数据存放数组(动态变)
        var statisticsData = [];   //这是我自己建的空数组，为了把异步拿到的数据push进去
        var statisticsName = [];
        //6.ajax发起数据请求
        $.ajax({
            type : "post",
            async : true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
            url : "stuCouEcharts", //请求发送到TestServlet
            data : {'user':user},
            dataType : "json", //返回数据形式为json

            //7.请求成功后接收数据name+num两组数据
            success : function(result) {
                //result为服务器返回的json对象
                if (result) {
                    //8.取出数据存入数组
                    for (var i = 0; i < result.length; i++) {
                        var statisticsObj = {name:'',value:''};   //因为ECharts里边需要的的数据格式是这样的
                        statisticsObj.name = result[i].name;
                        statisticsName.push(result[i].name);
                        statisticsObj.value = result[i].num;
                        statisticsData.push(statisticsObj);   //把拿到的异步数据push进我自己建的数组里
                    }

                    myChart.hideLoading(); //隐藏加载动画

                    //9.覆盖操作-根据数据加载数据图表
                    myChart.setOption({
                        legend: {
                            show: true,
                            x: '10%',
                            data: statisticsName //这里是图表上的数据                 
                        },
                        series: [{
                            name: '选课门数',
                            type: 'pie',
                            radius : '70%',
                            center: ['50%', '60%'],
                            data: statisticsData,    //这里是异步加载系列列表
                            
                            itemStyle: {
                                normal: {
                                    color: function(params) {
                                        // build a color map as your need.
                                        var colorList = [
                                          '#FF0000','#FF7D00','#FFFF00','#00FF00','#00FFFF',
                                           '#0000FF','#FF00FF','#FAD860','#F3A43B','#60C0DD',
                                           '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0'
                                        ];
                                        return colorList[params.dataIndex];
                                    },            　　
                                }
                            },
                            
                            
                        }]
                    });
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        })
    </script>

2.写servlet

 

public class TestServlet extends HttpServlet {

    private static final long serialVersionUID = 1L;

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doPost(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String sql = "select * from v_count_college order by number desc";
        //System.out.println(sql);
        List<Product> list = new ArrayList<Product>();
        DBBean db = new DBBean();    
        db.getConnection();
        ResultSet rs = db.executeQuery(sql);
        try {
            while(rs.next())
            {
                list.add(new Product(rs.getString(1), rs.getInt(2)));
                System.out.println(rs.getString(1));
            }
        }catch(Exception e) {
            e.printStackTrace();
        }    
        
        System.out.println("这里是doPost");
        //定义一个list集合
        

        // 数据添加到集合里面，这里可以改为获取sql数据信息，然后转为json字符串，然后存到list中。
        //这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，
        //每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合。
        //list.add(new Product("短袖", 10));
        //list.add(new Product("牛仔裤", 20));
        //list.add(new Product("羽绒服", 30));

        Gson gson2 = new Gson();
        String json = gson2.toJson(list);
        
        //ObjectMapper mapper = new ObjectMapper(); // 提供java-json相互转换功能的类

        //String json = mapper.writeValueAsString(list); // 将list中的对象转换为Json字符串

        System.out.println(json);

        // 将json字符串数据返回给前端
        response.setContentType("text/html; charset=utf-8");
        response.getWriter().write(json);
    }
}

3.servlet里需要下载与gson相关的jar包

 

4.考虑数据传输问题

 5.js获取session我没有想到很好地方法，所以 先session传html，再html传js，再js传ajax，再ajax传另一个servlet，坎坷啊。。。

(1)先session传html

 

(2)再html传js

 

(3)再js传ajax

(4)再ajax传另一个servlet,因为查询数据库要用到它

这些东西搞了我3小时，webjsp小白从头学起，终于弄出来了，还是很开心的，做一下记录，希望后来者可以少踩踩那些我已经踩过的坑。