echart 使用jsp展示

最新推荐文章于 2023-06-03 19:13:45 发布

qq_33721444

最新推荐文章于 2023-06-03 19:13:45 发布

阅读量1.5k

点赞数 1

文章标签： jsp echart date

本文链接：https://blog.csdn.net/qq_33721444/article/details/64124781

版权

JSP 使用echart 取出数据库数据展示

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%@page import="com.wangjin.shop.DB.SalesItem"%>
<%@page import="com.wangjin.shop.DB.ProductMgr"%>
<%@page import="com.wangjin.shop.DB.OrderMgr"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%
	ArrayList<String> saledproduct = new ArrayList<String>();
	ArrayList<Integer> count = new ArrayList<Integer>();
	ArrayList<SalesItem> salesItems = OrderMgr.getInstance().getItems2();//连接数据库部分
	for (Iterator<SalesItem> it = salesItems.iterator(); it.hasNext();) {
		SalesItem si = it.next();
		saledproduct.add(si.getProduct().getName());//取出数据存入Arraylist
		count.add(si.getCount());
	}
	int size = saledproduct.size();
	Integer[] count1 = new Integer[size];
	String[] product = new String[size];
	for (int i = 0; i < size; i++) {
		product[i] = (String) saledproduct.get(i);
		count1[i] = (Integer) count.get(i);
	}
%>
<!DOCTYPE html>
<html 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="http://echarts.baidu.com/gallery/vendors/echarts/echarts-all-3.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript">
       
var count2=new   Array(); 
<%   for(int i=0;i <count1.length;i++){   %> 
        count2[ <%=i%> ]= " <%=count1[i]%> "; 
<%   }   %> 
var  product1=new   Array(); 
<%   for(int i=0;i < product.length;i++){   %> 
         product1[ <%=i%> ]= " <%= product[i]%> "; 
<%   }   %> 
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;

function fetchData(cb) {
    // 通过 setTimeout 模拟异步加载
    setTimeout(function () {
        cb({
            categories: product1,
            data:count2
        });
    }, 1000);
}

// 初始 option
option = {
    title: {
        text: '产品销量图'
    },
    tooltip: {},
    legend: {
        data:['销量']
    },
    xAxis: {
        data: []
    },
    yAxis: {},
    series: [{
        name: '销量',
        type: 'bar',
        data: []
    }]
};

fetchData(function (data) {
    myChart.setOption({
        xAxis: {
            data: data.categories
        },
        series: [{
            // 根据名字对应到相应的系列
            name: '销量',
            data: data.data
        }]
    });
});;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
       </script>
   </body>
</html>