导入相应的包需要的文件;
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN8AAAB9CAIAAACtTyGeAAAMo0lEQVR4nO2cXWwU1xXHl6dIqDwk5kNFstRYluKkCFxsHNOmBjWVKt4IwolQH4IQSpWUYOPQxhWmbEw3uCEuTgSOy5eN8LY0tRvC4koUUByc2CBV4IAp2yR8rBOKcdnKMgXPrm1uH247He7X3rk7uzN35vx0ZN29O+fcO7t//jPePTiE7BMOhxWyAIBgaPCs+GfI1e0BQUcsUBV1gncCjuCyd/btrDAjpwsBmuKMd4b58FK6NxQLHuaO0P8wH/KekqxAz1tR3qFCos9wzDt5KuTN90UqjJE2Y6RtLN4yMth0o7c+frS2L1JhDfunkxmZd118DKFmXhZT/fLYzfKrmh3zTlvzpyKLjbGzgjgVWWz/XDID6tQI17zz1LbFxshRQRx88Vu8tejrpjkmronMh8xEoj5zRfpZog5d2e4OiURxFm8tP+Gkd4YexpynfyKERs+1J6LVo+faEULddYsEQS9Ha4X5NhMDxFGeeIaow6vGy7LOZNyh2oC5nA9wzTsRQoloNZq6lIhWI4SMG204nltaSAedK36rBE+pqZPwM+aRMuqUPwtJUQqK+wN37jtHe9824uGVJSEjHh7tbUYIGfEmI960omz+6srS1ZWl6fR5PFhRPp9Oz7M6eQ9BnTnFNe9MRKtNdf7XPgfDxmB42YK5WJfmz6oFc+l0yRsv3u0aLzH0MPLL0f4qrsDboXiT4vNl1tcdFz7vTMTqk71rjXj44oEqIx5OfrR2OFZvDNYbg/VlxY9hUeJYXVlaXvwoXcF/bwNA4853RYlo9fS1xuSZzStLQskzm6evNiai1QdfeuLgS088WTiL8M6nCmcR6TwfAvyHC9+z90cWPviqdSze0rN71Vi8BQ239kcW4qcenzeTuO8smjdTYQ+AD3DHO28OdPRHFlrj5kAHfqpw9iN05GIPgBY4750A4Ag58U7lDrrctd7NLH7Fs5GjU/YHefLOycpKCAhnwzHvdP1MIPwX4J0Q3g3nvZM+OA9ty3bvAuG+0yMI7jsV1clEoE7m8c62LduVi7LOQJ0OIv6VKE/eKV8EqbYtgzo1RTPvVGtbptXA1AfzIZ1ljsVZvA2AOiXxinfSzUG8tuXj2xYbNzrMkGxbpu0t+wGiNIcoQYN3Zolm3tld920j3oKju26R2baMHqTQ8PqhnXNwoP5lPHUSk4gvMmaiQHnMUswjQZ0yeMU7JYsghKIbinGfcnfdIjzAgR6khnbOSd+5jPqL0ZE5J16dY80SCyijOgUDGbPkzYM6M6KZdx58sdAYrO+uW4S7lc2QVCftgsQMPRZoiCc1nk+DOm3hCe+09XnnrlXf7K5bhFuVrSGvTq+FwiscHFz2TgVwnzIRoE7/4b53ZkyUBdTpR/TzTjYPUqh/2YlX5+BA/cusT7ouQVCnAt7yztzhugRBnWo47535v7Lnrm0ZcJGceCcTd70T0BTwTsCjBM474a8t64Wu3pmftmUe8Oce8oDG3pmftmUByuoEWcujsXeaY+v77WzbsgBQZ67xiXdKqTOLv7ZsrmLrD8ERf5JOkAXw0Ns7c922bGKVl60B868iyp9mkAmQd6q1LTOXIGasT9H+KlMK4KG3d2Jk1KnWtsxcgpiRGYhLAUx84p0y82pty1asvkiPiWOI+w1mKbunHEA09s48tC0DLqKxdyqg0LYMuIuu3ulIIkIZ2pYBFwmWd7IRti0D7uIH7wR8ibd646GDDiDwy/8rkuPYW6XMcHdXAJPAeecHTd9JpaeIGDr2MgjUmwTLO7t2LJ5ITRmpqYnUlDn4/HTDZRCo9wicdx55s+zu/cm79ydL1rXimEhN3Tjb9PnphqFjL/8hUqa2AeT21z/091K2mqHs7nzP1h/hIB4yJ21VxonmOFje2bm93FTnzTsprE4zor8qz6a4sjqdknV++qGs6sFjWoL0MfLFzeMD553tjUvu3p9MjqdNdWKx4uhoXKK2AQyoU3CMWv1geef+bUvMyzpWZ3I8jaWZHE/v3yb6zxv0hZLul+MdQ4zFWUQHCa+nhLkWveeMr4l4dSaCK7s5Yz044x6I4njgK+8U/8S8t/Vp87KO1WlGcjzd2vA0bwmrmLIcZNSQpKTog5W9U1yEQKw82k3BO2V5d0ul9VeiknWtdPcxM5F2FIEUmFbEy+KVyqgSpptmrMwrJb963tTpK++U4TevL8WuaUb23cf0jMxAXEo8zyvolDrFueL7TvBOdZp+/j2rNLF3KnQf0zP0mDhGfD/HSxGcC7MyvR+iMq8UsyxvafrTIpkZGaxZgfPOyGvPYF0O/3PCrjp9jKTF5p9geecbm565NjJhjSCrU8ahXSRw3rmt9vsNNVUNtVUNtVVbaqsaaquCrE7vEyzvZADdx14lcN4J6IUfeuNBnb4kcP+vCLqP9SJY3gndxxoROO+E7mO9CJZ3+qz72O6KeesalqnDXN1K4LzT393HYvLWNWzNFasz4zHB8k5/dx+LyWfXsF1lM+cD5506dh9L7keheyNHXcO8yszrOC8rYyOIZt4ZqO5j+siMWfnsGpavo3ZZR770Tj91H9OJGY2TObbOeEqdyB/eKY9vuo8VquWzaxi8UwVNu49l5Ktw3yk5I4NyHfDO/+Oz7mP5O1QdCZx3+qP7OKNH+oZgeSd0H2tE4LyTAXQfe5WhwbOC8KF3AhqBPZJHTtQJAeFUOH9lh4BwKsA7IbwbnvvMYqBnk7WtPT05nZ6cPvTZZ+jf169c3PPp1Td7hvau2fP+C/VH3N4pkC3mb+i8cMw7nUr8JPbaRGrSjMmp6cmp6ZpYrOvvfzvce6DzzysOHvjhT7e2r9novDoF399IfgDJO0zy+yTJHSokylTOsoJC43NO1JlTPv7w9XvGpBnYO2tisR98nFgT7dn6k2d/trF21cYPNm1pdnZdmbdHfAyhZl5Wxm8vs9lD9serodZaqp93nv7TL8bvTRJx6vSHLxz+5NldQ+s2dT2/7vDz67bve+/XanvgAerMBhl10sfr550nuraM3Zu0RkHR8oKi5V9cOV+3c++PN7z7Sl3Lb1u3M3OZ3RUhqm+D95CZSNRnrkg/S9ShK9vdIZEozuKtxUP8atCnwCRj47N1Ho+96J0Zm4hHz7UnotWj59oRQsnxNFZncjydHE+fv/CpeAlaK8y3mRggjvLEM0QdXjVelnUm4w7VBszlmEi+FLxqMq2l9Ix+3okQSkSr0dSlRLQaITQ6lsLqfG5pIR10rvitEjylpk7CY5hHyqhT/iwkRSkozoR5aoL9EHhInTm97xztfduIh1eWhIx4eLS3GSGE1bmibP7qytLVlaXp9Hk8WFE+n07Pszp5D3VXp60lkGrjs37emYhWm+rE9llQtHx97Y5lC+ZiXZo/qxbMpdOJOyTeDRPtDeLE0MPIL0f7q7gCb4fiTYrPlziAftGIecmyBAqNz5p5ZyJWn+xda8TDFw9UGfFw8qO1w7H6gqLlnV0ny4ofw6LEsbqytLz4UbqC+BUEeIhftxy9qpp5ZyJaPX2tMXlm88qSUPLM5umrjYlodWfXyeu3jScLZxHe+VThLCJd5p84YEXmFcvdq6qZd/ZHFj74qnUs3tKze9VYvAUNt/ZHFn55a+LLWxOPz5tJ3HcWzZuptg3AI2jmnTcHOvojC61xc6Cjre2dtrZ3Cmc/Qofb+wWyQjPvBAIFqBPwLppd2QVcGOzbfby5Jhbbfbz5wmCf29sBHEA/7xzo2UTE1St/uTDYVxOLffHXDuPW2ZpY7Ls9l0CgPkA/74Tu4+Cgn3e62H2sBny8qox+3ulW9zGQf/TzTre6j4H8o593ZtN9jKG7LhCn7YMYM3s1xF/i8Vo6iDpw9WfiRe8U/+x5/5e40dgMrE7JJehmHMkB3ddDDDKuyDxYvk4A0c87j/7+jdGxlDVMdRZsvxya0Rya0Vyw/TIvXV6LhH0y68hIipY1U6+gThpveacMf+yM/ONfKWuY6jR1GZrB/ZXIlmXSWcSkgjrlFwX0887fHdrx9Z3U13dSBUXLTXWur91hHhCave8bNecFFehbPaZZMu8yiTqCh8x58UIAgX7eebj9rcSokRg1sGXi6Ow6iZ8VX9atZC8IyQriw0CXAvTzzvb9zddvG9dvG51dJ01pXr9t2CqSpWPJ5MosAcYpRj/v3Ld3F243JgI/G5rRHJp3KHerA/lEP+/EvcZ0uL0vwHn0804gOIA6Ae+i35UdCA7gnYB3cdk7+3ZWmJHThQAdcUydYT68lO4NxYKHeUPt40b4kDIPOKlOW/N9kQpjpM0YaRuLt4wMNt3orY8fre2LVFjD7skof+udoywgSzKq8z/xP2PtFnnzKwAAAABJRU5ErkJggg==" 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();
}
}