当前位置 : 主页 > 编程语言 > java >

对echarts的简单封装

来源:互联网 收集:自由互联 发布时间:2021-06-28
对echarts的简单封装 function PublicRead() {};PublicRead.inherit(Portlet);PublicRead.prototype.init = function(oComponent) {PublicRead.base.init.call(this); this._component = oComponent;}PublicRead.prototype.complete = function(oCompon
对echarts的简单封装
function PublicRead() {
};

PublicRead.inherit(Portlet);

PublicRead.prototype.init = function(oComponent) {
	PublicRead.base.init.call(this);
    this._component = oComponent;
}

PublicRead.prototype.complete = function(oComponent) {
	this._echart =  this._component.getElementById("echart");//柱状图
    var data = [{name:'直接访问',data:{'周一':1,'周二':5,'周三':4,'周四':3,'周五':9,'周六':6,'周日':2}},{name:'邮件营销',data:{'周一':2,'周二':3,'周三':1,'周四':4,'周五':7,'周六':2,'周日':2}}];
    var data1 = [{name:'直接访问',data:{'周一':1,'周二':5,'周三':4,'周四':3,'周五':9,'周六':6,'周日':2}}];//饼图、漏斗图

    var option = this.option("淘宝周销售数据","line",data);
    var option1 = this.option1("淘宝周销售数据","funnel",data1);
    this._echart.setOption(option);
}
/**
 * 柱状图、折线图模板
 * **/
PublicRead.prototype.option = function(title, type, datavalue) {
	var xAxis = this.xaxis(datavalue);
    //获取图例和数据
    var legend = [];
    var dds = [];
    
    for(var k in datavalue){
    	var name = datavalue[k].name;
        var datas = [];
        var data = datavalue[k].data;
        for (var l in data) {
        	datas.push(data[l]);
        }
        legend.push(name);
        dds.push({name:name,type:type,data:datas})
    }
    
    //柱状图、折线图模板对象
    var opt = {
		title: {
			text: title
		},
        legend: {
            data:legend
        },
        tooltip : {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis : [
            {
                type : 'category',
                data : xAxis
            }
        ],
        yAxis : [
            {
                type : 'value'
            }
        ],
        series : dds
    };
    return opt;
}
/**
 * 饼图、漏斗图模板
 * **/
PublicRead.prototype.option1 = function(title, type, datavalue) {
    //获取图例和数据
    var legend = this.xaxis(datavalue);
    var dds = [];
    
    for(var i in datavalue){
        var datas = [];
        var data = datavalue[i].data;
        for (var j in data) {
        	datas.push({name:j,value:data[j]});
        }
        dds.push({name:title,type:type,data:datas})
    }
    
    //饼图、漏斗图模板对象
    var opt = {
		title: {
			text: title
		},
        legend: {
            data:legend
        },
        tooltip : {
            trigger: 'item'
        },
        series : dds
    };
    return opt;
}
/**
 * 获取x轴数据
 * **/
PublicRead.prototype.xaxis = function(datavalue) {
	//分析数据获取x轴,暂时以第一个数据的所有key做x轴
	var array;
	for(var kk in datavalue){//取对象第一个属性
	    array = datavalue[kk].data;
	    break;
	}
	var xaxis = [];
	for(var k in array){
	    xaxis.push(k);
	}
	return xaxis;
}
网友评论