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="width:100% ;float:none;display:block; ">
                <!-- 2.為ECharts准備一個具備大小（寬高）的Dom -->
                <div id="main" style="width: 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%',
                                    width: '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小白從頭學起，終於弄出來了，還是很開心的，做一下記錄，希望后來者可以少踩踩那些我已經踩過的坑。