Echart显示后端mysql数据

本文主要是介绍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数据的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

MySql教程