Echarts2 二次封装

之前在文库中上传了一份Echarts2的二次封装js,本来是随手而为,近期突然想起来看了一下,没想到居然有很多朋友查看和下载,超出了我的预料,感觉帮到了许多朋友,不过那边后续更新比较麻烦,所以转移到这边继续,这版是在原版之后进行优化的版本(主要是根据我这边的项目需求),朋友们要是有什么想法或者意见可以留言,我会不定期上来看一看。
虽然现在已经出Echarts3了,但是我还一直在使用Echarts2,原因是E3中使用了C3和H5,在IE浏览器上的兼容不是很好,而我这边的项目主要是在IE上,还有就是用习惯了。。。

以下是源码-20181106

/**
 * 每次部署的时候,都不要忘记修改这个路径
 */

require.config({
	paths: {
		'echarts': '/echarts-2.2.3/build/dist'
	}
});
/**
 * 这是一个判空的函数,可以单独提出来放到工具类中
 * 
 * @param str
 * @returns {Boolean}
 */
function IsEmptyData(str) {
	var result = false;
	if(str == null || typeof(str) == 'undefined') {
		result = true;
	} else {
		var reg = new RegExp(" ", "g");
		str += "";
		str = str.replace(reg, "");
		if(str.length == 0) {
			result = true;
		}
	}

	return result;
}

/**
 * 设置项目的基础路径
 * 
 * @param EchartsbasePath
 */
function SetEchartsbasePath(EchartsbasePath) {
	require.config({
		paths: {
			'echarts': EchartsbasePath + '/echarts-2.2.3/build/dist'
		}
	});
}

/**
 * 如果需要对饼图绑定事件,那么在加载页面之前(如果是嵌套页,则在主页面上)执行以下方法,对类库提前加载
 */
function pie_environment() {
	require(['echarts', 'echarts/chart/pie', 'echarts/chart/funnel'], function(ec) {});
}

/**
 * 如果需要对柱(线)图绑定事件,那么在加载页面之前(如果是嵌套页,则在主页面上)执行以下方法,对类库提前加载
 */
function bar_environment() {
	require(['echarts', 'echarts/chart/bar', 'echarts/chart/line'], function(ec) {});
}

/**
 * 如果需要地图绑定事件,那么在加载页面之前(如果是嵌套页,则在主页面上)执行以下方法,对类库提前加载
 */
function earth_environment() {
	require(['echarts', 'echarts/chart/map'], function(ec) {});
}

/**
 * 饼图构建辅助方法
 * 
 * @param divid
 *            容器ID
 * @param ajaxdata
 *            JSON数据
 * @param piesetting
 *            包含属性:name, value, titletext, subtitletext, seriesname, islegend,
 *            legendalign, istoolbox, titlealign, orienttype
 * @param name
 *            名称 列名
 * @param value
 *            值 列名
 * @param titletext
 *            主标题
 * @param subtitletext
 *            副标题
 * @param seriesname
 *            提示框名称
 * @param islegend
 *            是否显示示例,默认值true
 * @param legendalign
 *            图例显示位置,默认值left
 * @param istoolbox
 *            是否显示右上方的工具栏,默认值true
 * @param istooltip
 *            是否显示提示框,默认值true
 * @param titlealign
 *            标题位置,默认值center
 * @param orienttype
 *            图例的排序方式,默认为垂直显示(vertical),水平显示属性为horizontal
 * @param chartradius
 *            饼图半径,默认55%,传入数组实现环形图[内半径,外半径]
 * @param itemStyle
 *            设置提示文字样式
 * @param color
 *            设置颜色带,需传入一个数组,数量大于等于数据的数量
 * @param titleStyle
 *            标题样式
 */
function InitECharts_pie(divid, ajaxdata, piesetting) {
	if(IsEmptyData(divid) || IsEmptyData(document.getElementById(divid))) {
		alert("绑定的容器ID不存在");
		return false;
	}

	if(IsEmptyData(ajaxdata)) {
		for(var i = 0; i < document.getElementById(divid).childNodes.length; i++) {
			document.getElementById(divid)
				.removeChild(document.getElementById(divid).childNodes[i]);
		}
		return false;
	}

	if(IsEmptyData(piesetting)) {
		alert("设置为空或不正确");
		return false;
	}

	if(IsEmptyData(piesetting.titletext)) {
		piesetting.titletext = "";
	}

	if(IsEmptyData(piesetting.subtitletext)) {
		piesetting.subtitletext = "";
	}

	if(IsEmptyData(piesetting.seriesname)) {
		piesetting.seriesname = "";
	}

	if(IsEmptyData(piesetting.islegend)) {
		piesetting.islegend = true;
	}

	if(IsEmptyData(piesetting.legendalign)) {
		piesetting.legendalign = 'left';
	}

	if(IsEmptyData(piesetting.istoolbox)) {
		piesetting.istoolbox = true;
	}

	if(IsEmptyData(piesetting.istooltip)) {
		piesetting.istooltip = true;
	}

	if(IsEmptyData(piesetting.titlealign)) {
		piesetting.titlealign = "center";
	}

	if(IsEmptyData(piesetting.orienttype)) {
		piesetting.orienttype = "vertical";
	}

	if(IsEmptyData(piesetting.chartradius)) {
		piesetting.chartradius = "55%";
	}

	if(IsEmptyData(piesetting.titleStyle)) {
		piesetting.titleStyle = {};
	}

	var legend = "";

	if(piesetting.islegend) {
		var data = [];

		for(var i = 0; i < ajaxdata.length; i++) {
			data.push(ajaxdata[i][piesetting.name]);
		}

		legend = {
			orient: piesetting.orienttype,
			x: piesetting.legendalign,
			data: data
		};
	}

	var piedata = [];

	for(var i = 0; i < ajaxdata.length; i++) {
		piedata.push({
			value: ajaxdata[i][piesetting.value],
			name: ajaxdata[i][piesetting.name]
		});
	}

	var option = {
		title: {
			text: piesetting.titletext,
			subtext: piesetting.subtitletext,
			x: piesetting.titlealign,
			textStyle: piesetting.titleStyle
		},
		tooltip: {
			show: piesetting.istooltip,
			trigger: 'item',
			formatter: (piesetting.seriesname ? "{a} <br/>{b} : {c} ({d}%)" : "{b} : {c} ({d}%)"),
			position: function(posit) {
				return [posit[0] - 10, posit[1] + 30]; // 位置指定
			}
		},
		legend: legend,
		toolbox: {
			show: piesetting.istoolbox,
			feature: {
				mark: {
					show: true
				},
				dataView: {
					show: true,
					readOnly: false
				},
				magicType: {
					show: true,
					type: ['pie', 'funnel'],
					option: {
						funnel: {
							x: '25%',
							width: '50%',
							funnelAlign: 'left',
							max: 1548
						}
					}
				},
				restore: {
					show: true
				},
				saveAsImage: {
					show: true
				}
			}
		},
		calculable: false,
		// clickable : true,
		series: [{
			name: piesetting.seriesname,
			type: 'pie',
			radius: piesetting.chartradius,
			center: ['50%', '60%'],
			data: piedata
		}]
	};

	if(!IsEmptyData(piesetting.itemStyle)) {
		option.series[0].itemStyle = piesetting.itemStyle;
	}

	if(!IsEmptyData(piesetting.color)) {
		option.color = piesetting.color;
	}

	var myChart1 = null;
	require(['echarts', 'echarts/chart/pie', 'echarts/chart/funnel'], function(ec) {
		myChart1 = ec.init(document.getElementById(divid));
		myChart1.clear();
		myChart1.setOption(option);
	});
	return myChart1;
}

/**
 * 饼图构建辅助方法
 *
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值