zhywebcore/EC.Web/wwwroot/lib/echarts/charts_comm.js

var ECharts = {
	ChartDataFormate: {
		FormateNOGroupData: function (data) {
			//data的格式如上的Result1，这种格式的数据，多用于饼图、单一的柱形图的数据源
			var categories = [];
			var datas = [];
			for (var i = 0; i < data.length; i++) {
				categories.push(data[i].name || "");
				datas.push({ name: data[i].name, value: data[i].value || 0 });
			}
			return { category: categories, data: datas };
		},
		FormateGroupData: function (data, type, is_stack) {
			//data[{name:"",value:"",group:""},...]
			//data的格式如上的Result2，type为要渲染的图表类型：可以为line，bar，is_stack表示为是否是堆积图，这种格式的数据多用于展示多条折线图、分组的柱图
			var chart_type = 'line';
			if (type)
				chart_type = type || 'line';
			var xAxis = [];
			var group = [];
			var series = [];
			for (var i = 0; i < data.length; i++) {
				for (var j = 0; j < xAxis.length && xAxis[j] != data[i].name; j++);
				if (j == xAxis.length)
					xAxis.push(data[i].name);
				for (var k = 0; k < group.length && group[k] != data[i].group; k++);
				if (k == group.length)
					group.push(data[i].group);
			}
			for (var i = 0; i < group.length; i++) {
				var temp = [];
				for (var j = 0; j < data.length; j++) {
					if (group[i] == data[j].group) {
						if (type == "map") {
							temp.push({ name: data[j].name, value: data[i].value });
						} else {
							temp.push(data[j].value);
						}
					}
				}
				switch (type) {
					case 'bar':
						var series_temp = { name: group[i], data: temp, type: chart_type };
						series_temp = $.extend({}, {
							markPoint: {
								data: [
									{ type: 'max', name: '最大值' },
									{ type: 'min', name: '最小值' }
								]
							},
							markLine: {
								data: [
									{ type: 'average', name: '平均值' }
								]
							}
						}, series_temp);
						break;

					case 'map':
						var series_temp = {
							name: group[i], type: chart_type, mapType: 'china', selectedMode: 'multiple',
							itemStyle: {
								normal: { label: { show: true } },
								emphasis: { label: { show: true } }
							},
							data: temp
						};
						break;
					case 'line':
						var series_temp = { name: group[i], data: temp, type: chart_type };
						if (is_stack)
							series_temp = $.extend({}, { stack: 'stack' }, series_temp);
						series_temp = $.extend({}, {
							markPoint: {
								data: [
									{ type: 'max', name: '最大值' },
									{ type: 'min', name: '最小值' }
								]
							},
							markLine: {
								data: [
									{ type: 'average', name: '平均值' }
								]
							}
						}, series_temp);
						break;

					default:
						var series_temp = { name: group[i], data: temp, type: chart_type };
				}
				series.push(series_temp);
			}
			return { category: group, xAxis: xAxis, series: series };
		}
	}
	,
	ChartOptionTemplates: {
		CommonOption: {
			title: {
				text: '智能图表',
				left: "40%"
			},
			//通用的图表基本配置
			tooltip: {
				trigger: 'item'//tooltip触发方式:axis以X轴线触发,item以每一个数据项触发
			},
			toolbox: {
				show: true,
				orient: 'vertical',
				left: 'left',
				top: 'top',
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			}
		},
		CommonLineOption: {//通用的折线图表的基本配置
			title: {
				text: '智能图表',
				left: "40%"
			},
			tooltip: {
				trigger: 'axis'
			},
			calculable: true,
			toolbox: {
				show: true,
				//orient : 'vertical',
				left: 'right',
				top: 'top',
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					restore: { show: true },
					magicType: ['line', 'bar'],//支持柱形图和折线图的切换
					saveAsImage: { show: true }
				}
			}
		},
		Pie: function (data, name) {
			//data:数据格式：{name：xxx,value:xxx}...
			var pie_datas = ECharts.ChartDataFormate.FormateNOGroupData(data);
			var option = {
				tooltip: {
					trigger: 'item',
					formatter: '{b} : {c} ({d}/%)',
					show: true
				},
				legend: {
					orient: 'vertical',
					x: 'left',
					data: pie_datas.category
				},
				calculable: true,
				toolbox: {
					show: true,
					feature: {
						mark: { show: true },
						dataView: { show: true, readOnly: true },
						restore: { show: true },
						saveAsImage: { show: true }
					}
				},
				series: [
					{
						name: name || "",
						type: 'pie',
						radius: '65%',
						center: ['50%', '50%'],
						data: pie_datas.data
					}
				]
			};
			return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);
		},
		Lines: function (data, name, is_stack) {
			//data:数据格式：{name：xxx,group:xxx,value:xxx}...
			var stackline_datas = ECharts.ChartDataFormate.FormateGroupData(data, 'line', is_stack);
			var option = {
				legend: {
					data: stackline_datas.xAxis
				},
				xAxis: [{
					type: 'category', //X轴均为category，Y轴均为value
					data: stackline_datas.xAxis,
					boundaryGap: false//数值轴两端的空白策略
				}],
				yAxis: [{
					type: 'value',
					splitArea: { show: true }
				}],
				series: stackline_datas.series
			};
			return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
		},
		Bars: function (data, name, is_stack) {
			//data:数据格式：{name：xxx,group:xxx,value:xxx}...
			var bars_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'bar', is_stack);
			var option = {
				legend: { data: bars_dates.category },
				xAxis: [{
					type: 'category',
					data: bars_dates.xAxis
				}],

				yAxis: [{
					type: 'value'
				}],
				toolbox: bars_dates.toolbox,
				series: bars_dates.series
			};
			return $.extend({}, ECharts.ChartOptionTemplates.CommonLineOption, option);
		},
		Maps: function (data, name, is_stack) {
			//data:数据格式：{name：xxx,group:xxx,value:xxx}...
			var maps_dates = ECharts.ChartDataFormate.FormateGroupData(data, 'map', is_stack);
			var option = {
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left',
					data: ['iphone3', 'iphone4', 'iphone5']
				},
				visualMap: {
					min: 0,
					max: 2500,
					left: 'left',
					top: 'bottom',
					text: ['高', '低'],           // 文本，默认为数值文本
					calculable: true
				},
				series: maps_dates.series
			};
			return $.extend({}, ECharts.ChartOptionTemplates.CommonOption, option);
		}
	}
};