Echars使用步骤:
第一步、引入Echars-all.js
<script src="${pageContext.request.contextPath }/js/echarts-all.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.2.min.js"></script>
第二步获取Echars容器对象并Ajax获取数据、
<div id="main" style="width: 1300px;height:700px;"></div>//给Echars一个容器
/**Ajax获取数据*/
var myChart = echarts.init(document.getElementById('main'));
第三步、SpringMVC接受数据,并返回数据$.ajax({ type : "post", async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行) url : "${pageContext.request.contextPath }/show/lcd.do?method=searchCityDoThingNumber", //请求发送到相应url处 data : {flag:flag}, dataType : "json", //返回数据形式为json success : function(result) { //请求成功时执行该函数内容,result即为服务器返回的json对象 if (result) { for(var i=0;i<result.length;i++){ names.push(result[i].deptname); //挨个取出类别并填入类别数组 } for(var i=0;i<result.length;i++){ nums.push(result[i].casenum); //挨个取出数量并填入数量数组 } myChart.hideLoading(); //隐藏加载动画 myChart.setOption({ //加载数据图表 title: { x: 'center', text: '' }, tooltip : { trigger: 'axis' }, // legend: { // x: 'right', // data:['办件量' /* ,'降水量' */ ] // }, /* toolbox: {//工具栏 show : true, feature : { // mark : {show: true}, dataView : {show: true, readOnly: false}, magicType : {show: true, type: ['line', 'bar']}, restore : {show: true}, myTool : { //自定义Echars 工具栏工具事件 show : true, title : '上一周数据', icon : 'image://http://echarts.baidu.com/images/favicon.png', onclick : function (){ rediret(); //点击事件 } }, saveAsImage : {show: true} } }, */ calculable : true, xAxis : [ { type : 'category', show: false, data :names, axisLabel:{ interval:0,//横轴信息全部显示 rotate:-30,//-30度角倾斜显示 } } ], grid: { // 控制图的大小,调整下面这些值就可以, /* x: 40, x2: 100, */ x:'10%', x2: '10%', y2:'20%'// y2可以控制 X轴跟Zoom控件之间的间隔,避免以为倾斜后造成 label重叠到zoom上 }, yAxis : [ /* { type : 'value', splitArea : {show : true} } */ ], series : [ { name:'办件量', type:'bar', itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [ '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B', '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD', '#D7504B','#C6E579','#F4E001','#F0805A','#26C0C0', '#CDB79E','#ADFF2F','#B4EEB4','#90EE90','#4EEE94' ]; return colorList[params.dataIndex] }, label: { show: true, position: 'top', formatter: '{b}\n{c}' } } }, data:nums }/* , { name:'降水量', type:'bar', data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3] } */ ] }); } }, error : function(errorMsg) { //请求失败时执行该函数 //alert("图表请求数据失败!"); myChart.hideLoading(); } })
@RequestMapping(params = "method=searchCityDoThingNumber") public void searchCityDoThingNumber(String flag,Model model,HttpServletResponse response,HttpServletRequest request){ String logo =request.getParameter("flag"); List<CityDoThingNumber> departmentList=cityDoThingNumberService.getCityDoThingNumber(logo);//获取所有区域 ObjectMapper mapper = new ObjectMapper();//一个工具类可以转将List<Object>转成json String json; try { json = mapper.writeValueAsString(departmentList);//可以转将List<Object>转成json response.getWriter().write(json); System.out.println(json); } catch (Exception e) { e.printStackTrace(); } }