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所需要的包,否则会显示错误。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
 赞 (0)
                        