iHealth-app-demo/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
					},
					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: false
						},
						axisLabel: {
							show: false
						},
						axisTick: {
							show: false
						},
						splitLine: {
							show: false
						}
					}],
					series: seriesData
				}
				legend && (options.legend = legend);
				return options;
			},
			//			饼状图
			initBZChartsOptions: function( seriesData, c) {
				var options = {
					tooltip: {
						show: false,
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c}"
					},
					color: c || ['#17b3ec', '#FF774F'],
					calculable: false,
					series: [{
						type: 'pie',
						radius: '65%',
						center: [70, '50%'],
						label: {
							normal: {
								show: false,
								textStyle: {
									color: "#000"
								}
							}
						},
						itemStyle: {
							normal: {
								label: {
									show: false
								},
								labelLine: {
									show: false
								}
							}
						},
						data: seriesData
					}]
				}
				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
					},
					xAxis: [{
						type: 'category',
						data: xAxisData,
						axisLabel:{
                            interval:0,
                            showMinLabel: true,
                            showMaxLabel: true
                        },
						splitLine: {
							show: false
						}
					}],
					yAxis: [{
						type: 'value'
					}],
					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);