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图表中.其中包含带参与不带参 ...
随机推荐
- 【做题记录】[NOIP2016 普及组] 魔法阵
P2119 魔法阵 2016年普及组T4 题意: 给定一系列元素 \(\{X_i\}\) ,求满足以下不等式的每一个元素作为 \(a,b,c,d\) 的出现次数 . \[\begin{cases}X_ ...
- DP秒思维
DP算法对于大部分题有着良好的能力,但有些题目我们要转换思维,不能直接的设具体的转态.... 最近做了两道秒题,在这里分享一下: https://ac.nowcoder.com/acm/contest ...
- pvcreate vgcreate lvcreate 扩容
centos6 服务器磁盘扩容 1.创建物理卷 /dev/sdb #pvcreate /dev/sdb 参数:/dev/sdb 设备名 2.创建卷组 vg_02 #vgcreate vg_02 / ...
- 自动化SQL注入工具 sqlmap 使用手册
0x00 sqlmap介绍 什么是sqlmap? sqlmap是一个开源的渗透测试工具,它自动化了检测和利用SQL注入缺陷 以及接管数据库服务器的过程.它配备了一个强大的检测引擎 ,以及终极渗透测试仪 ...
- js--数组的 Array.of() 和 Array.from() 方法的使用总结
前言 JavaScript 中数组的本质是一个对象,它存在的 length 属性值随数组元素的长度变化,但是开发中经常会遇到拥有 length 属性和若干索引属性的对象,被称为类数组对象,类数组对象和 ...
- go 集合
p.p1 { margin: 0; font: 12px ".PingFang SC"; color: rgba(69, 69, 69, 1) } span.s1 { font: ...
- Python MySSH 实现剧本执行器
通过封装Paramiko这个SSH模块,我们可以实现远程批量管理Linux主机,在上一篇文章中我们封装过一个MySSH类,这个类可以执行命令上传下载文件等,我们在这个类的基础上,实现一个简单的任务执行 ...
- linux 入门系列-基础性知识
1:初探linux-基于centos7 运维和服务器硬件组合 两种登录方式:(1)-------root:管理员登录权限较高,不建议初学者使用格式: [root@centos7 jinlong]# ( ...
- (一)初识MySQL
JavaEE:企业级Java开发 Web 前端(页面:展示,数据) 后台(连接点,连接数据库JDBC,链接前端(控制,控制视图跳转和给前端传递数据)) 数据库(存数据,Txt,Excel,word) ...
- Spark 安装部署与快速上手
Spark 介绍 核心概念 Spark 是 UC Berkeley AMP lab 开发的一个集群计算的框架,类似于 Hadoop,但有很多的区别. 最大的优化是让计算任务的中间结果可以存储在内存中, ...