ECharts小结

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