码迷,mamicode.com
首页 > 编程语言 > 详细

java web数据可视化

时间:2020-03-07 09:37:42      阅读:108      评论:0      收藏:0      [点我收藏+]

标签:执行   函数   实例   基于   fir   com   erro   orm   err   

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

java web数据可视化

标签:执行   函数   实例   基于   fir   com   erro   orm   err   

原文地址:https://www.cnblogs.com/g414056667/p/12432439.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!