ECharts是一个纯 Javascript 的图表库，可以流畅的运行在 PC 和移动设备上 在项目里，我主要使用了柱状图和饼状图。具体可以参考ECharts官网。

柱状图

要在项目中使用图表进行统计，那么数据必然是动态变化的，因此我们需要使用ajax动态获取数据，具体可以参考 ECharts异步数据加载和更新，点击编辑实例即可看到代码，柱状图主要数据主要来自于X轴数据和Y轴数据，封装到ajax的data里，使用data调用即可。 下边是自己写的实例： 首先需要在HTML中创建一个div，并且引入echarts.js

<script type="text/javascript" src="js/echarts.js"></script> <div id="main"></div>

下边需要在js中进行配置

function makeChart () { //初始化echarts对象 var main = document.getElementById('main'); var div = document.createElement('div'); var width = document.body.clientWidth; div.style.cssText = width/3.5 + 'px; height:290px'; main.appendChild(div); return echarts.init(div); } function makeXl (data) { //图表实现 var chart = makeChart(); var option = { title: { text: '学历统计', x:'center' }, xAxis: { type: 'category', triggerEvent:true, //设置x轴可以点击 data: data.xXlList }, yAxis: { type: 'value' }, series: [{ data: data.yXlList, type: 'bar', itemStyle: { normal: { color: function(params) { // build a color map as your need. var colorList = [ '#FC8D52','#48CFAE','#EC87BF','#FFCE55','#ED5555','#FC8D52','#48CFAE' ]; return colorList[params.dataIndex] }, label: { show: true, //开启显示 position: 'top', //在上方显示 textStyle: { //数值样式 color: 'black', fontSize: 16 } } } } }] } chart.setOption(option); chart.on('click', function (params) { //设置点击事件 var xl; if(params.componentType == "xAxis"){ xl = params.value; //x轴的字 }else{ xl = params.name ; //选中柱状图x轴的字，params.value是数值 } // xl = encodeURIComponent(xl); xl = encodeURI(encodeURI(xl)); var randomNum1 = Math.random()*1000; //跳转url var tourl = "/d/rck?m=qtfxDataView&xl="+xl+"&dw="+$("#dw").val(); //替换按钮的id 需要修改 宽度高度 自己根据自己页面设置 f_chooseUsers('xl'+randomNum1,'xl'+randomNum1,tourl,'windowOpenContent','fulliframe',800,420,'autoOpen','学历统计'); }); }

那么看一下ajax操作

$.ajax({ type:"post", async:false, url:jspath+"/d/rck?m=qtfxData", data:{"dw":$("#dw").val()}, cache: false, dataType:"json", success: function(data){ makeXl(data[0]); $("#show_tongyong_kingdee").remove(); }, error:function(){ alert("操作失败,请联系系统管理员"); } });

后端Java代码，是把两个list集合放入map中，然后返给ajax，两个集合分别代表X和Y轴数据。

List list = rckBo.tjXl(pojo); List<Map<String, Object>> listmapList = list; List<Object> xXlList = new ArrayList<Object>(); List<Object> yXlList = new ArrayList<Object>(); for (Map<String, Object> map : listmapList) { //构造数据 System.out.println(map.get("xxmc")+"**"+map.get("count")); xXlList.add(map.get("xxmc")); yXlList.add(map.get("count")); } dataMap.put("xXlList", xXlList); dataMap.put("yXlList", yXlList); JSONArray ja = new JSONArray(); ja.add(dataMap); //在这里使用的框架较老，是用这种方式返回的json response.setCharacterEncoding("GBK"); response.getWriter().write(ja.toString());

饼状图

图形如下： 废话就不再多说了，直接上代码，会在 代码里写相关注释 需要的主要数据是

[ {value:335, name:'男'}, {value:310, name:'女'} ] function makeChartSex () { //初始化echarts，设置大小 var main = document.getElementById('mainSex'); var div = document.createElement('div'); var width = document.body.clientWidth; div.style.cssText = width/3 + 'px; height:290px'; main.appendChild(div); return echarts.init(div); } function makeSex (data) { //主要配置 var chart = makeChartSex(); var option = { title : { text: '性别比例', x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, series : [ { name: '', type: 'pie', radius : '55%', center: ['50%', '60%'], data: data.listXB, //取数据，这里数据是键值对，需要后台封装对象里 itemStyle: { emphasis: { shadowBlur: 10, shadowOffsetX: 0, shadowColor: 'rgba(0, 0, 0, 0.5)' }, normal:{ //显示文字+百分比 label:{ show: true, formatter: '{b} : {c} ({d}%)' //设置显示的文字是什么,eg：男:4243(75%) }, color: function(params) { // build a color map as your need. var colorList = [ '#5D9CEC','#EC87BF' ]; return colorList[params.dataIndex] }, labelLine :{show:true} } } } ] } chart.setOption(option); chart.on('click', function (params) { //设置点击事件 var sex; if(params.componentType == "xAxis"){ sex = params.value; //x轴的字 }else{ sex = params.name ; //选中柱状图x轴的字，params.value是数值 } sex = encodeURI(encodeURI(sex)); var randomNum1 = Math.random()*1000; //跳转url var tourl = "/d/rck?m=qtfxDataView&sex="+sex+"&dw="+$("#dw").val(); //替换按钮的id 需要修改 宽度高度 自己根据自己页面设置 f_chooseUsers('sex'+randomNum1,'sex'+randomNum1,tourl,'windowOpenContent','fulliframe',800,420,'autoOpen','性别比例'); }); } //ajax操作 $.ajax({ type:"post", async:false, url:jspath+"/d/rck?m=qtfxData", data:{"dw":$("#dw").val()}, cache: false, dataType:"json", success: function(data){ makeSex(data[0]); }, error:function(){ alert("操作失败,请联系系统管理员"); } });

后台Java代码如下：

//性别 List list1 = rckBo.tjXb(pojo); List<Map<String, Object>> listmapList1 = list1; List<Property> listXB = new ArrayList<Property>(); for (Map<String, Object> map : listmapList1) { Property property = new Property(); //属性是name,value property.setName(map.get("xxmc")+""); property.setValue(map.get("count")+""); listXB.add(property); } dataMap.put("listXB", listXB); JSONArray ja = new JSONArray(); ja.add(dataMap); response.setCharacterEncoding("GBK"); response.getWriter().write(ja.toString());