标签：Echart 后端 js json mysql 页面 数据 echart
一、基本思想
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,后端,js,json,mysql,页面,数据,echart 来源： https://www.cnblogs.com/nzpdbk/p/15363516.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。