echarts实现条形图表

导入相应的包需要的文件;

前台调用:

<script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'ec/jsp/profileOfProduct/echarts'   //路径写到echarts这个总包即可
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/line' // 使用条形图就加载bar模块，按需加载,即上图中chart包先的js
            ],
            function (ec) {
               
                var myChart = ec.init(document.getElementById('main')); //图表的div1(主意div必须设置高度,否则图表不能显示)
//ajax调用卸船量数据
                $.ajax({
                    url:"${pageContext.request.contextPath}/ec/jsp/profileOfProduct/query.jsp",
                    type: "GET",
                    data:{"action":"queryPortLoad"},
                    dataType: "text",
                    async:true,
                    success: function (data) {
                        if (data) {
                            var arr = eval("("+data+")");//将前台的json形式的字符串转换为json数据
                            var option = arr.option;
                            myChart.clear();
                            myChart.setOption(option);
                            myChart.refresh();
                        }
                    },
                }); 
            }
        );
    </script>

后台组织数据

　　数据格式参见echarts地址:http://echarts.baidu.com/echarts2/doc/example.html

　　我的做法是根据前台不同图表的数据格式写成javaBean,按需要的格式设置Option的格式

　　通过JsonObject类转换成json字符串返回前台代码如下:

public void queryOption(HttpServletRequest request,HttpServletResponse response) {
        Session session= new Session(EcConnection.get());
        
        try{
            String sql1 = "select  P_NAME, max(month_num) month_num,DATE_MONTH "+
                            " from PORT_LOAD_NUM WHERE P_NAME='一期码头' "+
                            " group by DATE_MONTH,P_NAME "+
                            " order by DATE_MONTH ";
            String sql2 = "select  P_NAME, max(month_num) month_num,DATE_MONTH "+
                    " from PORT_LOAD_NUM WHERE P_NAME='二期码头' "+
                    " group by DATE_MONTH,P_NAME "+
                    " order by DATE_MONTH ";
            String sql3 = "select  P_NAME, max(month_num) month_num,DATE_MONTH "+
                    " from PORT_LOAD_NUM WHERE P_NAME='杂货码头' "+
                    " group by DATE_MONTH,P_NAME "+
                    " order by DATE_MONTH ";
            
            List<PortLoadNumBean> portLoadNumBeanList1 = session.queryForList(sql1, 0, 10000000, PortLoadNumBean.class);
            List<PortLoadNumBean> portLoadNumBeanList2 = session.queryForList(sql2, 0, 10000000, PortLoadNumBean.class);
            List<PortLoadNumBean> portLoadNumBeanList3 = session.queryForList(sql3, 0, 10000000, PortLoadNumBean.class);
            
            //拼装json
            LineOption lineOption = new LineOption();//option对象,改对象的属性值都是json中需要设定的,最后将该对象转换成json字符串返回前台即可
            lineOption.setTooltip(new Tooltip());
            lineOption.setLegend(new Legend());
            List<Object> xAxis = new ArrayList<Object>();
            
            //查询月份
            String sqlMonth = "select distinct DATE_MONTH from PORT_LOAD_NUM where 1=? order by DATE_MONTH ";
            List<String> months = session.queryForColumnList(String.class, sqlMonth, "1");
            StringBuilder sb = new  StringBuilder();
            sb.append("[");
            for (String month : months) {
                sb.append("'");
                sb.append(month);
                sb.append("'");
                sb.append(",");
            }
            String monthss = sb.toString().substring(0, sb.toString().length()-1);
            monthss += "]";
            String xAxisStr = "{type : 'category',boundaryGap : false,data : "+monthss+"}";
            xAxis.add(xAxisStr);
            lineOption.setxAxis(xAxis);
            
            List<Object> yAxis = new ArrayList<Object>();
            String yAxisStr = "{ type : 'value'}";
            yAxis.add(yAxisStr);
            lineOption.setyAxis(yAxis);
            
            List<Object> series = new ArrayList<Object>();
            Series series1 = new Series();
            
            ArrayList<Object> dataList1 = new ArrayList<Object>();
            for ( PortLoadNumBean bean :  portLoadNumBeanList1) {
                dataList1.add(bean.getMonth_num()/10000);
            }
            series1.setName("一期码头");
            series1.setData(dataList1);
            series.add(series1);
            
            Series series2 = new Series();
            ArrayList<Object> dataList2 = new ArrayList<Object>();
            for ( PortLoadNumBean bean :  portLoadNumBeanList2) {
                dataList2.add(bean.getMonth_num()/10000);
            }
            series2.setName("二期码头");
            series2.setData(dataList2);
            series.add(series2);
            
            Series series3 = new Series();
            ArrayList<Object> dataList3 = new ArrayList<Object>();
            for ( PortLoadNumBean bean :  portLoadNumBeanList3) {
                dataList3.add(bean.getMonth_num()/10000);
            }
            series3.setName("杂货码头");
            series3.setData(dataList3);
            series.add(series3);
            
            lineOption.setSeries(series);
            
            JSONObject jo = new JSONObject();
            jo.put("option", lineOption);
            try {
                response.getWriter().write(jo.toString());
            } catch (IOException e) {
                e.printStackTrace();
            }
            
        }finally{
            session.close();
        }
    }