一、基本思想
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);
}
解决方法：将两处的名称修改一致