关于echarts柱状图的问题:主要动态展示多条

//柱状图//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  
                 }  , 

这个属性就可以设置


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值