echarts 柱状图实例

 

定义一个div

<div id="moreColumn" style="width: 80%; height: 70%;float: left;"></div>

echarts获取div

var myChart = echarts.init(document.getElementById('moreColumn'));

 定义生成柱状图的函数

function loadColumn(myChart, breed) {
		// 显示标题，图例和空的坐标轴
		myChart.setOption({
			color : [ '#6dd8da', '#b6a2de', '#58afed', '#F3D7B5', '#98FB98', '#FFA500',
				'#E9967A', '#808080', '#F0E68C', '#DB7093', '#9ACD32' ],
			title : {
				text : '历年轮换分析图',
				subtext : ''
			},
			tooltip: {
    	        trigger: 'axis',
    	        axisPointer: {
    	            type: 'shadow'
    	        }, 
    	    },
			legend : {
				data : []
			},
			toolbox: {
    	        show: true,
    	        orient: 'vertical',
    	        left: 'right',
    	        top: 'center',
    	        feature: {
    	            mark: {show: true},
    	            dataView: {show: true, readOnly: false},
    	            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
    	            restore: {show: true},
    	            saveAsImage: {show: true}
    	        }
    	    },
    	    calculable: true,
    	    xAxis: [
    	        {
    	            type: 'category',
    	            axisTick: {show: false},
    	            data: []
    	        }
    	    ],
			yAxis : [
				{
					type : 'value'
				}
			],
			series : []
		});
		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
		$.ajax({
			url : "${ctx}/_data/vr/sell/getYear",
			type : "post",
			data : {
				breed : breed,
			},
			dataType : "json", //返回数据形式为json
			success : function(result) {
				if (result.length == 0) {
					myChart.hideLoading(); //隐藏加载动画
					myChart.setOption({ //加载数据图表
						series : [],
						legend : {
							data : []
						},
					});
				} else {
					var servicedata = [];
					//创建一个数组，用来装对象传给series.data，因为series.data里面不能直接写for循环
					var xtype = []; //xtype存放的是横坐标，年
					var ytype = ['轮入','轮出']; //ytype存放的是每一条数据显示的name，品种
					var breedname ;
					for (var i = 0; i < result.length; i++) {
						breedname = result[i].breedname;
						break;
					}
					for (var i = 0; i < result.length; i++) {
						if (xtype.indexOf(result[i].year) == -1) {
							xtype.push(result[i].year);
						}
					}
					for (var i = 0; i < ytype.length; i++) {
						var counts = [];
						for (var j = 0; j < xtype.length; j++) {
							counts.push(0.00);
						}
						var obj = new Object();
						obj.name = ytype[i];
						obj.data = counts;
						obj.type = 'bar';
						servicedata[i] = obj;
					}
					for (var i = 0; i < result.length; i++) {
						for (var j = 0; j < ytype.length; j++) {
							if (ytype[j] == '轮入') {
								if (result[i].name == 'I') {
									for (var k = 0; k < xtype.length; k++) {
										if (result[i].year == xtype[k]) {
											servicedata[0].data[k] = parseFloat(servicedata[0].data[k]) + parseFloat(result[i].count);
										}
									}
								}
							}
							if (ytype[j] == '轮出') {
								if (result[i].name == 'O') {
									for (var k = 0; k < xtype.length; k++) {
										if (result[i].year == xtype[k]) {
											servicedata[1].data[k] = parseFloat(servicedata[1].data[k]) + parseFloat(result[i].count);
										}
									}
								}
							}
							
						}
					}
					myChart.hideLoading(); //隐藏加载动画
					myChart.setOption({ //加载数据图表
						title : {
							subtext : breedname
						},
						xAxis : [
							{
								type : 'category',
								axisTick : {
									show : false
								},
								data : xtype
							}
						],
						series : servicedata,
						legend : {
							data : ytype
						},
					});
				}
			},
			error : function(errorMsg) {
				//请求失败时执行该函数
				$.messager.show({
					title : '很抱歉',
					msg : '柱状图无数据'
				});
				myChart.hideLoading();
			}
		});
	}
	;

breed是柱状图传进去的查询条件

查询语句：

/* 查询中点击确定按钮 */
	function selectOk() {
		var breed = $('#breed').val();
		if (myChart != null && myChart != "" && myChart != undefined) {
			myChart.dispose();
		}
		myChart = echarts.init(document.getElementById('moreColumn'));
		loadColumn(myChart, breed);
	}
//一般myChart是外部定义的，这样在查询中就可以直接引用了
//其中
if (myChart != null && myChart != "" && myChart != undefined) {
			myChart.dispose();
		}
//是判断chart里面存在与否，每次刷新需要先清空

最终结果：