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分类，并设置默认类型位barif (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配置。