说来惭愧，我的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("发送完成");

    }

可视化页面展示

Hive的使用以及如何利用echarts实现可视化在前端页面展示(四)---连接idea使用echarts可视化界面的更多相关文章

  1. 基于Echarts的股票K线图展示

    发布时间:2018-10-31   技术:javascript+html5+canvas   概述 基于echarts的股票K线图展示,只需引用单个插件,通过简单配置,导入数据,即可实现炫酷复杂的K线 ...

  2. 利用Jquery的load函数实现页面的动态加载

    利用Jquery的load函数实现页面的动态加载  js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面的动态刷新,经过几天的研究与探索,终于有所成效!吾心甚蔚! ...

  3. 利用Ring Buffer在SQL Server 2008中进行连接故障排除

    原文:利用Ring Buffer在SQL Server 2008中进行连接故障排除 出自:http://blogs.msdn.com/b/apgcdsd/archive/2011/11/21/ring ...

  4. 利用webBrowser获取框架内Html页面内容

    原文:利用webBrowser获取框架内Html页面内容 利用webBrowser获取页面比较简单,MSDN下有示例,在这里不必多说. 可是一些 HTML 文档由“框架”构成,或可以存放它们自己独特 ...

  5. 一个利用pojo类从前端页面request中获取参数的小框架~

    写之前不知道Spring已经实现这样的功能,所以傻傻的写了这个东西! 实现原理挺有趣的在此记录一下.从去年十月参加java开发以来自己终于有了点小进步. 好开心. 解决问题(详解):前端form表单提 ...

  6. 【干货】利用MVC5+EF6搭建博客系统（四）（上）前后台页面布局页面实现，介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  7. 利用Chrome的Performance工具排查页面性能问题（原叫timeline）

    当页面中发生卡顿,最先考虑的是swf文件造成的卡顿,经过排查发现不是swf造成的影响,利用Chrome的Performance工具发现页面中的一些元素不断在重新布局,造成潜在的性能瓶颈. 首先在Chr ...

  8. Ueditor文字和echarts图片 生成 word 前端解决方案

    编程就像搭积木,少了任何一个就拼接不起来,所有积木都找到就只剩下调试. 一.echarts  获取图片方法getDataURL  详细配置:https://www.echartsjs.com/zh/a ...

  9. 小程序中多个echarts折线图在同一个页面的使用

    最近做小程序的业务中遇到一个页面要同时显示几个echarts图,刚开始遇到各种冲突,死数据可以,动态数据就报错的问题,折磨了一天,仔细看了官网和查在各种资料之后,终于解决了. 直接上代码: commi ...

  10. hive语句嵌入python脚本（进行map和reduce，实现左外连接）

    在Hive语句中使用脚本(如python和shell)进行map和reduce:利用命令transform(或者指定map和reduce),配合加入的脚本文件add file 请看:http://ww ...

随机推荐

  1. 2023-08-12：用go语言写算法。实验室需要配制一种溶液，现在研究员面前有n种该物质的溶液， 每一种有无限多瓶，第i种的溶液体积为v[i]，里面含有w[i]单位的该物质， 研究员每次可以选择一瓶

    2023-08-12:用go语言写算法.实验室需要配制一种溶液,现在研究员面前有n种该物质的溶液, 每一种有无限多瓶,第i种的溶液体积为v[i],里面含有w[i]单位的该物质, 研究员每次可以选择一瓶 ...

  2. vite 找不到依赖模块：[plugin:vite:dep-pre-bundle]

    问题描述: 运行项目时,出现[plugin:vite:dep-pre-bundle] 错误.这种问题一般为依赖的包未正常配置相关字段,导致vite无法找到包的入口. 遇到这种模块内.找不到引用模块的, ...

  3. C#程序配置读写例子 - 开源研究系列文章

    今天讲讲关于C#的配置文件读写的例子. 对于应用程序的配置文件,以前都是用的ini文件进行读写的,这个与现在的json类似,都是键值对应的,这次介绍的是基于XML的序列化和反序列化的读写例子.对于in ...

  4. 应用管理平台Walrus开源，构建软件交付新范式

    今日,数澈软件Seal(以下简称"Seal")宣布正式开源 Walrus,这是一款基于平台工程理念的应用管理平台,致力于解决应用交付领域的深切痛点. 借助 Walrus 将云原生的 ...

  5. 一个超经典 WinForm 卡死问题的最后一次反思

    一:背景 1. 讲故事 在我分析的 200+ dump 中,同样会遵循着 28原则,总有那些经典问题总是反复的出现,有很多的朋友就是看了这篇 一个超经典 WinForm 卡死问题的再反思 找到我,说 ...

  6. 《Linux基础》03. 运行级别 · 实用指令

    @ 目录 1:运行级别 2:帮助指令 2.1:man 2.2:help 3:文件目录指令 3.1:pwd 3.2:ls 3.3:cd 3.4:mkdir 3.5:rmdir 3.6:touch 3.7 ...

  7. 论文精读：带有源标签自适应的半监督域适应（Semi-Supervised Domain Adaptation with Source Label Adaptation）

    Semi-Supervised Domain Adaptation with Source Label Adaptation 具有源标签适应的半监督域适应 原文链接 Abstract 文章指出当前的半 ...

  8. Elasticsearch整合SpringBoot案例

    1.elasticsearch官方文档的使用与介绍 1.1.Rest客户端初始化官方文档链接: https://www.elastic.co/guide/en/elasticsearch/client ...

  9. 【接口自动化测试】Eolink Apilkit 安装部署，支持 Windows、Mac、Linux 等系统

    Eolink Apikit 有三种客户端,可以依据自己的情况选择.三种客户端的数据是共用的,因此可以随时切换不同的客户端. 我们推荐使用新推出的 Apikit PC 客户端,PC 端拥有线上产品所有的 ...

  10. 制作一个内部的 zabbix-agent 快速部署脚本

    下载官方的基础 agent 部署包 官方地址:点击到达 curl -O https://cdn.zabbix.com/zabbix/binaries/stable/5.0/5.0.36/zabbix_ ...