echart 使用jsp展示

来源：互联网发布：网络限制编辑：程序博客网时间：2024/05/12 08:12

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());//取出数据存入Arraylistcount.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);}// 初始 optionoption = {    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>

0 0