Hive的使用以及如何利用echarts实现可视化在前端页面展示(四)---连接idea使用echarts可视化界面-526互联

说来惭愧，我的javaweb烂得一批，其他步骤我还是很顺利地，这个最简单的，我遇到了一系列问题。只能说，有时候失败也是一种成功吧

这一步其实就是正常的jdbc，没什么可说明的，但是关于使用echarts我还是遇到了一些困难，如果有高手能指正一二，感激不尽

echarts获取前端数据要使用Ajax，我不会这个语法。”后端不会送，前端不会要“。

如果你现在也不会这个步骤，可以参考下面这个，希望对你有所帮助，大家都挺难的，其实就是接口问题，接口找好了，很简单了。

<!DOCTYPE html>
<html lang="zh-CN" style="height: 100%">

<head>
  <meta charset="utf-8">
</head>

<body style="height: 100%; margin: 0">
  <div id="container" style="height: 100%"></div>


  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

  <script type="text/javascript">

    axios("/111.json").then(res => {
      console.log(res)
      const data = res.data;
      var dom = document.getElementById('container');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false
      });
      var app = {};

      var option;

      option = {
        tooltip:{},
        xAxis: {
          type: 'category',
          data: data.map(v => v["hzb"])
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: data.map(v => v["zzb"]),
            type: 'bar'
          }
        ]
      };

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }

      window.addEventListener('resize', myChart.resize);
    })
  </script>
</body>

</html>

这里的url地址很重要，你找到这个，前端就不用动了，然后里面的值是你后端设定的，就代码部分没什么错误了

那么后端怎么写呢，其实就是转化成json数据，等着前端接收。

可以参考看看我的，希望帮到你

 public void getAlldata(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");
        response.setContentType("text/html;charset=UTF-8");
        List<DataEntity> list=dao.queryByDateAndAll();
        JSONArray json=new JSONArray();
        for(int i=0;i<list.size();i++){
            JSONObject ob=new JSONObject();
            ob.put("day_id",list.get(i).getDay_id());
            ob.put("sale_nbr",list.get(i).getSale_nbr());
            ob.put("incnt",list.get(i).getIncnt());
            ob.put("inround",list.get(i).getInround());
            ob.put("outcnt",list.get(i).getOutcnt());
            ob.put("outround",list.get(i).getOutround());
            ob.put("li",list.get(i).getLirun());
            json.add(ob);
        }
        PrintWriter out = response.getWriter();
        out.write(json.toString());
        System.out.println("发送完成");
    }

可视化页面展示