说来惭愧，我的javaweb烂得一批，其他步骤我还是很顺利地，这个最简单的，我遇到了一系列问题。只能说，有时候失败也是一种成功吧
这一步其实就是正常的jdbc，没什么可说明的，但是关于使用echarts我还是遇到了一些困难，如果有高手能指正一二，感激不尽
echarts获取前端数据要使用Ajax，我不会这个语法。”后端不会送，前端不会要“。
如果你现在也不会这个步骤，可以参考下面这个，希望对你有所帮助，大家都挺难的，其实就是接口问题，接口找好了，很简单了。
<!DOCTYPE html> <html lang="zh-CN" style="height: 100%"> <head> <meta charset="utf-8"> </head> <body style="height: 100%; margin: 0"> <div id="container" style="height: 100%"></div> <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/[email protected]/dist/echarts.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script type="text/javascript"> axios("/111.json").then(res => { console.log(res) const data = res.data; var dom = document.getElementById('container'); var myChart = echarts.init(dom, null, { renderer: 'canvas', useDirtyRect: false }); var app = {}; var option; option = { tooltip:{}, xAxis: { type: 'category', data: data.map(v => v["hzb"]) }, yAxis: { type: 'value' }, series: [ { data: data.map(v => v["zzb"]), type: 'bar' } ] }; if (option && typeof option === 'object') { myChart.setOption(option); } window.addEventListener('resize', myChart.resize); }) </script> </body> </html>
这里的url地址很重要，你找到这个，前端就不用动了，然后里面的值是你后端设定的，就代码部分没什么错误了
那么后端怎么写呢，其实就是转化成json数据，等着前端接收。
可以参考看看我的，希望帮到你
public void getAlldata(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=UTF-8");
List<DataEntity> list=dao.queryByDateAndAll();
JSONArray json=new JSONArray();
for(int i=0;i<list.size();i++){
JSONObject ob=new JSONObject();
ob.put("day_id",list.get(i).getDay_id());
ob.put("sale_nbr",list.get(i).getSale_nbr());
ob.put("incnt",list.get(i).getIncnt());
ob.put("inround",list.get(i).getInround());
ob.put("outcnt",list.get(i).getOutcnt());
ob.put("outround",list.get(i).getOutround());
ob.put("li",list.get(i).getLirun());
json.add(ob);
}
PrintWriter out = response.getWriter();
out.write(json.toString());
System.out.println("发送完成");
}
可视化页面展示
标签：option,前端,idea,可视化,var,data,echarts From： https://www.cnblogs.com/gbrr/p/17725198.html