//柱状图//var xName=new Array();$(document).ready(function(){ var param = $('#conditionForm').serializeArray(); var paramJson = {}; $.each(param,function(i,v){ paramJson[v.name] = v.value; }) $.ajax({ type : 'post', url : base+"/resignSituation/myChart.htm", dataType : 'json', data : param, async : false, cache : true, success : function(data) { //if(data){ // options.legend.data = result.legend; //legend赋值数据 myChart.setOption({ xAxis:[{data: data[0].xdata }], series:[{data: data[0].ydata },{data: data[0].ysdata }], }); // } //debugger; //myChart.hideLoading(); //for(var i=0;i<data.length;i++){ //xName.push({ // xName:data[i].xName, //}) // } //var data1= data; ///myChart.setOption({ // xAxis:[{data: data1}], // series:[{data: data1 } // ,{data: data1 }], // }) } });});//var myChart = echarts.init(document.getElementById('myChart'));option = { title: { text: '离职率柱状图', x: 'left', y: 'top', }, tooltip : { trigger: 'axis', axisPointer: { type: 'shadow', label: { show: true } } }, toolbox: { show : true, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, magicType: {show: true, type: ['line', 'bar']}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : true, legend: { data: ['现在', '同期'] }, xAxis: [ { type : 'category', axisLabel: { interval:0, rotate:20 } , data : [] } ], yAxis: [ { type : 'value', name : '离职率 ', } ], series : [ { name: '现在', type: 'bar', barGap: 0, data: [] }, { name: '同期', type: 'bar', data: [] } ] };myChart.setOption(option);关于Echart的柱状图显示有时候网上的例子不能直接用,动态的需要自己修改,我这里给出一点点方法
后台数据封装
List<Echart> echartList = new ArrayList<Echart>();
List<String> xNameList = new ArrayList<String>();
List<Double> YRateList = new ArrayList<Double>();
List<Double> YRateSList = new ArrayList<Double>();
for (int i = 0; i <datas.size(); i++) {
ResignSituation resignSituation = datas.get(i);
if (null == resignSituation.getCompanyName() ) {
xNameList.add(datas.get(i).getOrgName());
}else {
xNameList.add(datas.get(i).getCompanyName());
}
YRateList.add(datas.get(i).getResignRate());
YRateSList.add(datas.get(i).getSameResignRate());
}
Echart echart = new Echart();
echart.setXdata(xNameList);
echart.setYdata(YRateList);
echart.setYsdata(YRateSList);
echartList.add(echart);
data = JSON.toJSONString(echartList);
return data;
主要是讲数据封装到data中,js直接取data[0]的值,需要几个柱子就加几个 y轴的值就好!
x轴字体方向设置:axisLabel: {
interval:0,
rotate:20
} ,
这个属性就可以设置