echarts使用总结（代码实例）

项目中需要做一个统计图表，第一次使用echarts，发现echarts提供的接口真是太丰富了，在使用过程中主要的操作就是xAxis、Series和Legend，其他的都都可以使用默认配置。

我的是需求是根据一个统计表数据，在前端用统计图表显示出来，不同可能需要显示不同的类型，如折线、柱状图、饼图等，为此我写了一个简单的echart工具类来实现，其中最主要的就是把数据表数据配置到echart的配置（option）的xAxis属性、series属性、legend属性中去，代码如下：

//数据添加到配置中去
	getOption: function (opts) {
		var defaults = {
			option: null,    //echart的配置对象
			data: null,      //统计数据
			xField: "name",  //x轴对应的数据列
			yFields: []      //y轴对应的数据列，格式为[{name:field1,type:"line"},...]
		}
		var options = $.extend(defaults, opts);
		//获取x轴名称
		var xAxis = [];
		var legend = [];
		var series = {};
		var data = options.data;
		//如果数据为空，结束操作
		if (data == null || data.length == 0) {
			return;
		}
		///获取x轴名称
		for (var i = 0; i < data.length; i++) {
			xAxis.push(data[i][options.xField]);
		}
		///获取series分类，并设置默认类型位bar
		if (options.yFields == null || options.yFields.length == 0) {
			options.yFields = [];
			for (var field in data[0]) {
				if (field != options.xField) {
					options.yFields.push({ name: field, type: 'bar' });
				}
			}
		}
		series = echartstool.getSeries(options.yFields, data);
		//配置X轴
		if (options.option.xAxis == null || options.option.xAxis.length == 0) {
			options.option.xAxis = [];
			options.option.xAxis.push({ type: 'category', data: xAxis, axisPointer: { type: 'shadow' } });
		} else {
			if (options.option.xAxis instanceof Array) {
				options.option.xAxis[0]["data"] = xAxis;
			} else {
				options.option.xAxis["data"] = xAxis;
			}
		}
		//设置数据
		options.option.series = [];
		for (var i = 0; i < options.yFields.length; i++) {
			var field = options.yFields[i];
			options.option.series.push({ name: field.name, type: field.type, label: field.name, data: series[field.name] })
			legend.push(field.name);
		}
		//配置Y轴
		if (options.option.yAxis == null || options.option.yAxis.length == 0) {
			options.option.yAxis = [];
			options.option.yAxis.push({ type: 'value', axisLabel: { formatter: '{value}' } });
		}
		//设置图例
		options.option.legend["data"] = legend;
		return options.option;
	}

上面的方法只能用于一些简单的应用中，不能做复杂的图表操作，于是从中提取了两个方法，用来获取最基本的series和xAxis的数据，代码如下

//获取数据序列（//yFields需要添加到series的列名称数组，格式为[{name:field1}，{name:field2},...],data为统计表数据的json对象）
	getSeries: function (yFields, data) {
		var series = {};
		for (var i = 0; i < yFields.length; i++) {
			var field = yFields[i];
			if (!Boolean(series[field.name])) {
				series[field.name] = [];
			}
		}
		for (var i = 0; i < data.length; i++) {
			var row = data[i];
			for (var field in row) {
				if (Boolean(series[field])) {
					series[field].push(row[field]);
				}
			}
		}
		return series;
	}

//获取X轴数据
	getXaxis: function (xField, data) {
		var xAxis = [];
		for (var i = 0; i < data.length; i++) {
			xAxis.push(data[i][xField]);
		}
		return xAxis;
	},

通过getSeries方法获取最原始的数据，就可以在业务逻辑处理时添加其他杂的逻辑操作来配置复杂的option配置。