刚开始编写echarts的时候一头的雾水,不知道这个动态显示数据应该怎么来表示,后来在不懈地摸索下终于把这一模块的问题解决。
前端我是用的easyui来写的,里面的一些插件datagrid等十分好用,一些朋友可以去尝试一下。在controller中我使用了JsonResult 来
返回一个json数据返回。数据比较简单。希望大家不要介意。
@RequestMapping(value = "/chartByArea") @ResponseBody public JsonResult chartByArea(){ List<Map> objList = userService.chartByArea(); JsonResult result = new JsonResult(); Map<String,List<Map>> data = new HashMap<>(); data.put("objList",objList); result.setStatus("1"); result.setData(data); return result; }
public class JsonResult { private String status; private Map data; private String msg; public String getStatus() { return status; } public void setStatus(String status) { this.status = status; } public Map getData() { return data; } public void setData(Map data) { this.data = data; } public String getMsg() { return msg; } public void setMsg(String msg) { this.msg = msg; } }
在xml文件里要注意他的resultType<select id="chartByArea" resultType="java.util.HashMap"> SELECT D.AREA_CODE title,COUNT(D.AREA_CODE) amount FROM DUSER D GROUP BY d.AREA_CODE </select>
下面是jsp中的重点<div class="easyui-panel" style="width: 100%" data-options="title:'员工区域分布'"> <div id="chart0" style="width: 350px;height:200px "> <div class="chart0-content">加载数据...</div> </div> </div>
$(document).ready(function(){ $.get('${host}/user/chartByArea', function(data){ var box = $("#chart0"); if(data.status === "1"){ var objList = data.data.objList; var chartData = []; $.each(objList, function(i, obj){ var tobj = { value:obj.AMOUNT, name: chart0formatter(obj.TITLE) }; chartData.push(tobj); }); box.find('.chart0-content').remove(); var chart0 = echarts.init(document.getElementById('chart0')); var option0 = { tooltip : {trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"}, color:['#c23531','#2f4554'], legend:{orient: 'vertical', left: 'left',data: ['溪洛渡','成都']}, series : [{name: '所在地址',type: 'pie',radius: '55%',center:['65%','60%'], data:[{value:2, name:'溪洛渡'}] }] }; option0.series[0].data = chartData; chart0.setOption(option0); }else{ box.find('.chart0-content').html('请求失败'); } }); function chart0formatter(TITLE){ if(TITLE === '1'){ return '溪洛渡'; }else if(TITLE === '2') { return '成都'; } } }
记得xml里面写的title和amount,在jsp上赋值给value,name时要大写。这两个属性是放在option里面的series中data的显示式样。可以通过series里面type来设置样式,pie 是饼图;