一、基本思想

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数据的更多相关文章

  1. android开发中 解决服务器端解析MySql数据时中文显示乱码的情况

    首先,还是确认自己MySql账户和密码 1.示例  账户:root   密码:123456   有三个字段   分别是_id  .username(插入有中文数据).password 1)首先我们知道 ...

  2. mysql中关于 like ，not like 的用法时不能显示空值的数据（空值不参与判断，直接过滤空值）

    一般在项目中用法是(这种没办法显示空值的数据): select * from 表 where 字段 like %aaa%; 解决空值不显示(除了显示的数据外,空值数据也可以显示): select * ...

  3. 浅析MySQL数据碎片的产生(data free)

    浅析MySQL数据碎片的产生 2011-03-30 09:28 核子可乐译 51CTO 字号:T | T MySQL列表,包括MyISAM和InnoDB这两种最常见的类型,而根据经验来说,其碎片的产生 ...

  4. 在spark中操作mysql数据 ---- spark学习之七

    使用spark的 DataFrame 来操作mysql数据. DataFrame是比RDD更高一个级别的抽象,可以应用SQL语句进行操作,详细参考: https://spark.apache.org/ ...

  5. MySQL数据导出导入【转】

    MySQL基础 关于MySQL数据导出导入的文章,目的有二: 1.备忘 2.供开发人员测试 工具 mysqlmysqldump 应用举例 导出 导出全库备份到本地的目录 mysqldump -u$US ...

  6. （转）MySQL数据表中带LIKE的字符匹配查询

    MySQL数据表中带LIKE的字符匹配查询 2014年07月15日09:56    百科369 MySQL数据表中带LIKE的字符匹配查询 LIKE关键字可以匹配字符串是否相等. 如果字段的值与指定的 ...

  7. 设置MySQL数据表主键

    设置MySQL数据表主键: 使用“primary key”关键字创建主键数据列.被设置为主键列不允许出现重复的值,很多情况下与“auto_increment”递增数字相结合.如下SQL语句所示: My ...

  8. Kettle的应用——对mysql数据进行表输入与导出

    Kettle的应用——对mysql数据进行表输入与导出 1. 下载好kettle解压包 网址:http://sourceforge.net/projects/pentaho/files/Data%20 ...

  9. 利用Ajax实现前端与.net后端实现数据交互

    使用场景和需求:用户在地址栏输入请求地址,先.net服务器发送页面请求,该页面包含Echart图表,在页面中向.net后端发送数据请求,获取数据后,将数据填充到Echart图表中.其中包含带参与不带参 ...

随机推荐

  1. STM32 PWM功能在关闭时GPIO电平不确定的情况

    刚开始接触STM32,遇到一个项目中出现在产品调试中出现在关闭PWM输出时,GPIO电平有不确定的情况.在网上查阅资料发现大神们是这样解释的:PWM在一个脉冲没有结束时关闭输出,会导致GPIO电平不确 ...

  2. Ubuntu下在当前用户下安装JDK1.8

    Oracle官网的JDK下载需要用户登录才能下载,JDK1.8的下载地址:https://www.oracle.com/cn/java/technologies/javase/javase-jdk8- ...

  3. Java 将Excel转为et和ett格式

    以.et结尾的文件格式是属于金山办公软件WPS Office中的电子表格文件,.ett是一种模板文件格式.除了通过WPS软件可以创建该格式的电子表格外,也可以通过格式转换的方法来获得,如将Micros ...

  4. 转：VIVADO使用技巧：设置DCI与内部参考电压

    本文转自:Vivado使用技巧(12):设置DCI与内部参考电压 - 灰信网(软件开发博客聚合) (freesion.com) DCI与内部参考电压 Xilinx FPGA提供了DCI(Digital ...

  5. 在代码生成工具Database2Sharp中增加Vue&Element 工作流页面的快速生成

    在我们基于框架开发系统的时候,往往对一些应用场景的页面对进行了归纳总结,因此对大多数情况下的页面呈现逻辑都做了清晰的分析,因此在我们基于框架的基础上,增量式开发业务功能的时候,能够事半功倍.代码生成工 ...

  6. Mac卸载go

    1.删除go目录 一般目录是 /usr/local/go sudo rm -rf /usr/local/go 2.清除环境变量配置 3. mac安装go后自动创建的问题也需要删除 sudo rm -r ...

  7. Redis高可用方案哨兵机制------ 配置文件sentinel.conf详解

    Redis的哨兵机制是官方推荐的一种高可用(HA)方案,我们在使用Redis的主从结构时,如果主节点挂掉,这时是不能自动进行主备切换和通知客户端主节点下线的. Redis-Sentinel机制主要用三 ...

  8. Part 33 Angular nested scopes and controller as syntax

    Working with nested scopes using $scope object : The following code creates 3 controllers  - country ...

  9. [第三章]c++学习笔记1（this指针）

    this指针作用,其作用就是指向成员函数所作用的对象 使用例 为了返回c1,使用this指针,来指向作用的对象 使用空指针调用hello,调用hello欲使其作用在p指向的对象上,然而p没指向任何对象 ...

  10. string类运用:特殊的翻译

    特殊的翻译 小明的工作是对一串英语字符进行特殊的翻译:当出现连续且相同的小写字母时,须替换成该字母的大写形式,在大写字母的后面紧跟该小写字母此次连续出现的个数:与此同时,把连续的小写字母串的左侧和右侧 ...