zoukankan      html  css  js  c++  java
  • 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:['确诊人数'],
                    '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所需要的包,否则会显示错误。

  • 相关阅读:
    pip install
    自动更新高清电影文件中文名
    csv、excel导入oracle
    02_Jenkins配置任务
    01_Jenkins windows安装
    run_jmeter.py
    02_禅道的基本使用
    01_禅道搭建手册
    01_charles 下载安装(破解版)
    06_Linux常见的命令
  • 原文地址:https://www.cnblogs.com/g414056667/p/12432439.html
Copyright © 2011-2022 走看看