Echart显示后端mysql数据
一、基本思想
1.将数据存储在mysql数据库中
2.后端链接数据库，将数据库中的数据保存为json格式
3.将json格式数据使用ajax传到前端JSP页面中的Echarts
二、实现的关键点
1.导入必要的包 echart.js（或者是echart.min.js包等等）、jquery.min.js
<script src="js/echarts.js"></script>
<script src="js/jquery.min.js"></script>2.将mysql数据保存为json数据，在Servlet中
barDao bardao = new barDao();
ArrayList<barBean> list = bardao.select_all();
JSONArray json=new JSONArray();
for(int i=0;i<list.size();i++) {
JSONObject ob=new JSONObject();
ob.put("title", list.get(i).getName());
ob.put("zuozhe", list.get(i).getNum());
json.add(ob);
System.out.println("json数据转换成功");
}
System.out.println(json);
response.setContentType("text/html; charset=utf-8");
response.getWriter().write(json.toString()); //将json数据返回给客户端3.用ajax与Servlet将json数据传回客户端，也就是前端页面
三、报错情况及解决方式
1.网页其他部分正常显示，但<script>标签里的Echarts表格显示不出来
如图：
原因：未导入echart.js包
解决方式：下载echart.js包，在webapp下新建js文件夹，将下载好的echart.js文件复制到js文件夹里面。然后在<head>中添加<script>标签进行引入
<head>
<meta charset="utf-8">
<title>第一个 ECharts 实例</title>
<!-- 引入 echarts.js -->
<%-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>--%>
<script src="js/echarts.js"></script>
<script src="js/jquery.min.js"></script>
</head>2.Echarts表格正常显示，但是没有数据 如图：
可能错误原因：数据从mysql导入失败或者数据转化为json格式失败、数据传入前端页面失败
我遇到的原因：将mysql数据库中的数据转换为json格式的数据名与JSP页面中ajax使用的数据名不一致
Servlet中两个数据名为： “title”，“zuozhe”
ArrayList<barBean> list = bardao.select_all();
JSONArray json=new JSONArray();
for(int i=0;i<list.size();i++) {
JSONObject ob=new JSONObject();
ob.put("title", list.get(i).getName());
ob.put("zuozhe", list.get(i).getNum());
json.add(ob);
System.out.println("json数据转换成功");
}
System.out.println(json);而前端JSP页面中为：“name”，“num”
for(var i=0;i<result.length;i++){
names.push(result[i].name);
}
for(var i=0;i<result.length;i++){
nums.push(result[i].num);
}
解决方法：将两处的名称修改一致
Echart显示后端mysql数据的更多相关文章
- android开发中 解决服务器端解析MySql数据时中文显示乱码的情况
首先,还是确认自己MySql账户和密码 1.示例 账户:root 密码:123456 有三个字段 分别是_id .username(插入有中文数据).password 1)首先我们知道 ...
- mysql中关于 like ，not like 的用法时不能显示空值的数据（空值不参与判断，直接过滤空值）
一般在项目中用法是(这种没办法显示空值的数据): select * from 表 where 字段 like %aaa%; 解决空值不显示(除了显示的数据外,空值数据也可以显示): select * ...
- 浅析MySQL数据碎片的产生(data free)
浅析MySQL数据碎片的产生 2011-03-30 09:28 核子可乐译 51CTO 字号:T | T MySQL列表,包括MyISAM和InnoDB这两种最常见的类型,而根据经验来说,其碎片的产生 ...
- 在spark中操作mysql数据 ---- spark学习之七
使用spark的 DataFrame 来操作mysql数据. DataFrame是比RDD更高一个级别的抽象,可以应用SQL语句进行操作,详细参考: https://spark.apache.org/ ...
- MySQL数据导出导入【转】
MySQL基础 关于MySQL数据导出导入的文章,目的有二: 1.备忘 2.供开发人员测试 工具 mysqlmysqldump 应用举例 导出 导出全库备份到本地的目录 mysqldump -u$US ...
- （转）MySQL数据表中带LIKE的字符匹配查询
MySQL数据表中带LIKE的字符匹配查询 2014年07月15日09:56 百科369 MySQL数据表中带LIKE的字符匹配查询 LIKE关键字可以匹配字符串是否相等. 如果字段的值与指定的 ...
- 设置MySQL数据表主键
设置MySQL数据表主键: 使用“primary key”关键字创建主键数据列.被设置为主键列不允许出现重复的值,很多情况下与“auto_increment”递增数字相结合.如下SQL语句所示: My ...
- Kettle的应用——对mysql数据进行表输入与导出
Kettle的应用——对mysql数据进行表输入与导出 1. 下载好kettle解压包 网址:http://sourceforge.net/projects/pentaho/files/Data%20 ...
- 利用Ajax实现前端与.net后端实现数据交互
使用场景和需求:用户在地址栏输入请求地址,先.net服务器发送页面请求,该页面包含Echart图表,在页面中向.net后端发送数据请求,获取数据后,将数据填充到Echart图表中.其中包含带参与不带参 ...
随机推荐
- sudo user1账号获得管理员root的权限
user1虽然有sudo权限,但不是真正的root权限,修改内核参数之类的就做不了 但是有sudo权限就可以添加账号,以下添加了admin账号与root账号一样的权限 useradd -u 0 - ...
- Qt 使用大神插件快速创建树状导航栏
前言 本博客仅仅记录自己的采坑过程以及帮助网友避坑,方便以后快速使用自定义控件,避免重复出错. 下载插件 大神 Github Qt 自定义控件项目地址:https://github.com/feiya ...
- robot_framewok自动化测试--（4）常用关键字介绍
常用关键字介绍 在学习一门编程语言的时候,大多教材都是从打印"hello world"开始.我们可以像编程语言一样来学习 Robot Framework.虽然通过 RIDE 提供& ...
- LoadRunner12回放与录制
系统版本 本人的操作系统是win10 版本是loadrunner12. 开启loadrunner自带的机票预订服务器 找到loadrunner自带的机票预订测试服务器下图中点击启动 如下图所示代表启动 ...
- 大爽Python入门教程 2-2 序列: 字符串、元组与列表
大爽Python入门公开课教案 点击查看教程总目录 序列 序列(sequence): 顾名思义,有序的排列. 有序排列的一串数据. 一种容器,容器内成员有序排列. python的字符串str,元组tu ...
- 菜鸡的Java笔记 第六 - java 方法
前提:现在所讲解的方法定义格式,只属于JAVA 方法定义的其中一种组成方式.而完整的组成方式将随着学习逐步渗透. 1.方法的基本定义 方法(Method)在一些书中也会有人将其说是 函数(Funct ...
- Three.js实现脸书元宇宙3D动态Logo
背景 Facebook 近期将其母公司改名为 Meta,宣布正式开始进军 元宇宙 领域.本文主要讲述通过 Three.js + Blender 技术栈,实现 Meta 公司炫酷的 3D 动态 Logo ...
- SQL Server学习之路：建立数据库、建立表
1.前言 配置是win10+SQL Server 2012,使用的GUI管理工具是SQL Server 2012自带的SQL Server Management Studio(以下简称SSMS).本系 ...
- [luogu5180]支配树
对于有向图$G$和起点$s$,有以下定义和性质-- 为了方便,不妨假设$s$能到达$G$中所有点,并任意建立一棵以$s$为根的dfs树,以下节点比较默认均按照两点在这棵dfs树上的dfs序 支配点:$ ...
- CSharp使用Thrift作为RPC框架入门(一)
前言 本文将介绍由 Facebook 开发的远程服务调用框架 Apache Thrift,它采用接口描述语言定义并创建服务,支持可扩展的跨语言服务开发,所包含的代码生成引擎可以在多种语言中,如 C++ ...