echarts实现条形图表

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

aaarticlea/png;base64,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" alt="" />

前台调用:

<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();
        }
    }