java web數據可視化

這周用java web制作了全國各個省份的疫情數據的可視化，做的是最基礎的柱狀圖。

先導入

 

 相應的echarts包和插件

 

 

<script type="text/javascript">
        // 基於准備好的dom，初始化echarts實例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和數據
        myChart.setOption({
            title: { 
                text: '全國各省確診人數'
            },
            tooltip: {},
            legend: {
                data:['確診人數'],
                width:'auto',
                height:'auto'
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '確診人數',
                type: 'bar',
                data: []
            }]
        });
        myChart.showLoading();
        var names=[];    //類別數組（實際用來盛放X軸坐標值）
        var nums=[];    //銷量數組（實際用來盛放Y坐標值）
        // 使用剛指定的配置項和數據顯示圖表。

這個是echarts的基本框架具體的數值要通過ajax向servlet發送請求從而獲取數據庫的數據，

$.ajax({
        type : "post",
        async : true,            //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成才可以執行）
        url : "search",    //請求發送到TestServlet處
        success : function(resultJson) {
            var result= jQuery.parseJSON(resultJson);
            //請求成功時執行該函數內容，result即為服務器返回的json對象
            if (result) {
                for(var i=0;i<result.length;i++){
                      names.push(result[i].name);    //挨個取出類別並填入類別數組
                      nums.push(result[i].value);
                    }
                   myChart.hideLoading();    //隱藏加載動畫
                   myChart.setOption({        //加載數據圖表
                       xAxis: {
                           data: names
                       },
                       series: [{
                           // 根據名字對應到相應的系列
                           name: '確診人數',
                           data: nums
                       }]
                   });
                   
            }
       },
        error : function(errorMsg) {
            //請求失敗時執行該函數
        alert("圖表請求數據失敗!");
        myChart.hideLoading();
        }
   });

在servlet里面要將數據放回成json格式

request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=utf-8");
        System.out.println("1515");
        List<Data> Data = null;
        Data = DBUtil.getAll();
        List<Mydata> mydata = new ArrayList<Mydata>();
        for (Data data : Data) {
            Mydata info = new Mydata();
            info.setName(data.getProvince());
            info.setValue(data.getConfirmed());
            mydata.add(info);
        }
        Gson gson = new Gson();
        String json = gson.toJson(mydata);
        System.out.println(json);
        response.getWriter().write(json);

這里還要注意要想用json格式必須導入json所需要的包，否則會顯示錯誤。