项目中需要做一个统计图表,第一次使用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配置。