sr-iHealthApp/html/tuandui/js/init-charts.js

(function($, win) {
	$(function() {
		var ic = {
			init: function(op) {
				if(typeof op != 'object') {
					return;
				}
				var o = {};
				o.el = op.el || null; //元素
				o.xAxisData = op.xAxisData || null; //X轴
				o.seriesData = op.seriesData || null; //值
				o.chartsType = op.chartsType || ''; //图形
				o.legend = op.legend || '';
				o.color = op.color || '';
				o.cb = op.cb || ''; //图形
				o.grid = op.grid || null;
				return this.createECharts(o);
			},
			//			折线图
			setZXChartsOptions: function(xAxisData, seriesData, legend) {
				var options = {
					backgroundColor: '#fff',
					tooltip: {
						trigger: 'axis'
					},
					grid: {
						x: 30,
						y: 20,
						x2: 20,
						y2: 30,
						borderWidth:0
					},
					toolbox: {
						show: false
					},
					calculable: false,
					xAxis: [{
						type: "category",
						boundaryGap: false,
						data: xAxisData,
						axisLabel: {
							margin: 6
						},
						splitLine: {
							show: false
						},  
	                    axisLabel:{  
	                         interval:0,//横轴信息全部显示  
//	                         rotate:-30,//-30度角倾斜显示  
	                    }
					}],
					yAxis: [{
						axisLine: {
							show: true
						},
						axisLabel: {
							show: true
						},
						axisTick: {
							show: true
						},
						splitLine: {
							show: false
						}
					}],
					series: seriesData
				}
				legend && (options.legend = legend);
				return options;
			},
			//			饼状图
			initBZChartsOptions: function( seriesData, c) {
				var options = {
			        tooltip : {
			            trigger: 'item',
			            formatter: "{a} <br/>{b} : {c} ({d}%)"
			        },
			        color: c || ['#17b3ec', '#FF774F'],
			        series : [
			            {
//			                name: seriesName,
			                type: 'pie',
			                radius: '55%',
			                center: ['50%', '60%'],
			                label: {
			                    formatter: '{b}: {c} ({d}%)'
			                },
			                data: seriesData,
			                hoverAnimation: false
			            }
			        ]
			    };
				return options;
			},
			//			柱状
			initZZChartsOptions: function(xAxisData, seriesData, color, grid) {
				var options = {
					tooltip: {
						trigger: 'item'
					},
					toolbox: {
						dataZoom: true,
						show: true,
						orient: 'vertical',
						x: 'right',
						y: 'center'
					},
					grid: grid ? grid : {
						x: 35,
						y: 50,
						x2: 20,
						y2: 30,
						borderWidth:0
					},
					xAxis: [{
						type: 'category',
						data: xAxisData,
						axisLabel:{
                            interval:0,
                            showMinLabel: true,
                            showMaxLabel: true
                        },
						splitLine: {
							show: false
						}
					}],
					yAxis: [{
						type: 'value',
						axisLine: {
							show: true
						},
						axisLabel: {
							show: true
						},
						axisTick: {
							show: true
						},
						splitLine: {
							show: false
						}
					}],
					series: [{
						clickable: true,
						itemStyle: {
							normal: {
//								color: '#fbba31'
							}
						},
						itemStyle : { 
							normal: {
								label : {
									show: true, position: 'top'
									},
								color: color?color: '#fbba31'
								}
							},
						barWidth: 20,
						type: 'bar',
						data: seriesData 
					}]
				}
				return options;
			},
			createECharts: function(o) {
				var me = this;
				return new Promise(function(resolve, reject) {
					// 路径配置
					require.config({
						paths: {
							echarts: 'http://echarts.baidu.com/build/dist'
						}
					});
					require(['echarts',
							'echarts/chart/line',
							'echarts/chart/pie',
							'echarts/chart/bar'
						] // 使用柱状图就加载bar模块，按需加载]
						,
						function(echarts) {
							var myCharts = echarts.init(o.el);
							switch(o.chartsType) {
								case 1:
									myCharts.setOption(me.setZXChartsOptions(o.xAxisData, o.seriesData, o.legend));
									break;
								case 2:
									myCharts.setOption(me.initBZChartsOptions( o.seriesData, o.color));
									break;
								case 3:
									var ecConfig = require('echarts/config');
									myCharts.setOption(me.initZZChartsOptions(o.xAxisData, o.seriesData, o.color, o.grid));
									o.cb && (function() {
										myCharts.on(ecConfig.EVENT.CLICK, o.cb);
									})();
									break;
							}
							resolve(myCharts);

						});
				})
			}
		};
		win.$ic = ic;
	});
})(jQuery, window);