java web数据可视化

Posted 2021-03-07 残羽

这周用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所需要的包，否则会显示错误。