Java web数据可视化实现原理解析

Z时代
2024-01-10
分类：综合

这周用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);