<html> <head lang="en"> <meta charset="utf-8"> <title>ECharts</title> <script src="/BookShopSystem_war/layui/echarts.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="../../layui/echarts.min.js"></script> </head> <body> <div id="main1" style="width: 100%; height: 500px;"></div> <div id="main2" style="width: 1200px; height: 500px;margin-left: 10%"></div> </div> <script type="text/javascript"> var myChart2 = echarts.init(document.getElementById("main2")); $.ajax({ url: "/getBookVisualData", type: "get", dataType: "json", success: function(data) { // 获取categoryName和saleNum var categoryName = []; var saleNum = []; for (var i = 0; i < data.data.length; i++) { categoryName.push(data.data[i].categoryName); saleNum.push(data.data[i].saleNum); } // 使用echarts的setOption方法将数据渲染到图表中 var option2 = { xAxis: { type: 'category', data: categoryName }, yAxis: { type: 'value' }, series: [{ data: saleNum, type: 'bar' }] }; myChart2.setOption(option2); }, error: function(jqXHR, textStatus, errorThrown) { console.log("请求失败:" + textStatus + "," + errorThrown); } }); </script> </body> </html>
时间: 2024-02-14 17:18:55 浏览: 53
swiper横向循环图片
这是一个HTML页面的代码,其中引用了ECharts和jQuery库。页面中包含两个div标签,分别是id为main1和main2的图表容器。在JavaScript代码中,使用ajax方法向服务器发送请求,获取图书销售数据,并将数据渲染到id为main2的图表容器中。最终实现了在网页上展示图表的功能。
阅读全文