LSQZrzyAPP/js/CRECharts.js

/**
 * 创建者：王成
 * 创建日期：2021年12月10日
 * 描述：自定义ECharts
 */

/**
 * 构造函数
 * @param {JSON} options 选项
 */
function CrCharts(options) {
	this._init(options);
	this.click = options.click;
}

/**
 * 原型设置 必须的
 * @param {JSON} options 选项
 */
CrCharts.prototype.extend = function(options) {
	for (var key in options) {
		CrCharts.prototype[key] = options[key];
	}
}

/**
 * 内部函数集合
 */
CrCharts.prototype.extend({
	/**
	 * 初始化函数
	 * @param {JSON} options 选项
	 */
	_init: function(options) {
		if (options.domId == undefined) {
			console.error('未设置显示容器！')
			return;
		}
		var self = this;
		//局部变量
		this.selector = options.domId; //3D地图容器
		this.labelColor = options.labelColor; //标签颜色
		this.legendTextColor = options.legendTextColor; //图例文字颜色
		this.xAxisLineColor = options.xAxisLineColor; //X轴颜色
		this.yAxisLineColor = options.yAxisLineColor; //Y轴颜色
		this.splitLineColor = options.splitLineColor; //分割辅助线颜色
		this.chart = echarts.init(document.getElementById(this.selector));
		/* 添加事件 */
		this.chart.on('click', function(params) {
			if (self.click != undefined) {
				self.click(params);
			}
		});
		/* 辅助线样式 */
		this.splitLine = {
			show: true,
			lineStyle: {
				type: 'dashed',
				color: this.splitLineColor == undefined ? 'rgba(69,69,69,0.3)' : this.splitLineColor,
			}
		};
		/* X轴线样式 */
		this.xAxisLine = {
			show: true,
			lineStyle: {
				color: this.xAxisLineColor == undefined ? "rgba(69,69,69,1.0)" : this.xAxisLineColor,
			},
		};
		/* X轴样式 */
		if (options.xAxisLabel != undefined) {
			this.xAxisLabel = options.xAxisLabel; //X轴样式
		} else {
			this.xAxisLabel = {
				color: "rgba(69,69,69,1.0)",
				fontSize: 12,
				fontFamily: 'TTTGB-Medium',
				interval: 0,
			};
		}
		this.yAxisLine = {
			show: true,
			lineStyle: {
				color: this.yAxisLineColor == undefined ? "rgba(69,69,69,1.0)" : this.yAxisLineColor,
			},
		};
		if (options.yAxisLabel != undefined) {
			this.yAxisLabel = options.yAxisLabel; //Y轴样式
		} else {
			this.yAxisLabel = {
				color: "rgba(69,69,69,1.0)",
				fontSize: 12,
				fontFamily: 'TTTGB-Medium',
			};
		}
		/* 获取页面宽度 */
		this.pageSize = {
			width: document.body.clientWidth,
			height: document.body.clientHeight
		};
		/* 尺寸配置 */
		this.PageSize = {
			smartSize: 600,
			middleSize: 1400,
		}
	},

	/**
	 * 结合坐标Map和数值数组 构建创建地图点的数据数组
	 * @param {Map} geoCoordMap 包含name字段
	 * @param {JSON数组} data 内部的JSON包含{name: value:}
	 */
	_convertData: function(geoCoordMap, data) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var geoCoord = geoCoordMap[data[i].name];
			if (geoCoord) {
				res.push({
					name: data[i].name,
					value: geoCoord.concat(data[i].name).concat(data[i].value),
				});
			}
		}
		return res;
	},
	/**
	 * 动态轨迹线数据转换
	 * @param {JSON数组} data [{from:[] to:}]
	 * @param {String} type 类型 undefined 代表创建动态路径 而其他则代表创建底线
	 */
	_convertLines: function(data, fromMap, toMap, type) {
		var res = [];
		for (var i = 0; i < data.length; i++) {
			var dataLines = data[i];
			for (var idx = 0; idx < dataLines.from.length; idx++) {
				var coords = [];
				coords.push(fromMap[dataLines.from[idx]]);
				coords.push(toMap[dataLines.to]);
				if (type == undefined) {
					res.push({
						coords: coords,
					})
				} else {
					res.push({
						coords: coords,
						lineStyle: {
							color: 'rgb(34,115,141)',
							width: 1.0,
							curveness: -0.4,
							opacity: 0.9,
						}
					})
				}

			}
		}
		return res;
	},
	/**
	 * 创建地图配置
	 * @param {Object} minValue 区间最小值
	 * @param {Object} maxValue 区间最大值
	 */
	_createVisualMap: function(minValue, maxValue) {
		return {
			min: minValue,
			max: maxValue,
			realtime: true, //拖拽时是否实时更新
			calculable: false, //是否显示拖拽的手柄
			show: false, //是否显示拖拽手柄
			inRange: {
				color: ['lightskyblue', 'yellow', 'orangered']
			}
		}
	},

	/**
	 * 创建地图
	 * @param {Object} registerName 注册名称
	 * @param {Object} propertyName 默认属性名称
	 */
	_createGeo: function(registerName, propertyName) {
		return {
			map: registerName,
			roam: false,
			aspectScale: 1.0, //默认显示的地图宽高比
			label: {
				show: false,
				color: "#fff"
			},
			itemStyle: {
				areaColor: 'rgb(20,41,87)',
				borderColor: 'rgb(34,115,141)',
				borderWidth: 3,
				shadowColor: 'rgb(0, 180, 255)',
				shadowBlur: 20,
				opacity: 0.8,
			},
			emphasis: {
				itemStyle: {
					areaColor: 'rgb(128,128,128)',
				}
			},
			scaleLimit: { //滚轮缩放的极限控制
				min: 1.2, //缩放最小大小
				max: 6 //缩放最大大小
			},
			nameProperty: propertyName,
		}
	},

	/**
	 * 斜线纹理
	 */
	_decalSlant: function() {
		return {
			color: "rgba(0, 0, 0, 0.2)",
			dashArrayX: [1, 0],
			dashArrayY: [2, 5],
			symbolSize: 1,
			rotation: 0.523598775598298,
			dirty: false,
			symbol: "rect",
			symbolKeepAspect: true,
			backgroundColor: null,
			maxTileWidth: 512,
			maxTileHeight: 512,
		};
	},

	/**
	 * 圆形纹理
	 */
	_decalCircle: function() {
		return {
			color: "rgba(0, 0, 0, 0.2)",
			dashArrayX: [
				[8, 8],
				[0, 8, 8, 0]
			],
			dashArrayY: [6, 0],
			symbolSize: 0.8,
			rotation: 0,
			dirty: false,
			symbol: "circle",
			symbolKeepAspect: true,
			backgroundColor: null,
			maxTileWidth: 512,
			maxTileHeight: 512,
		};
	},

	/**
	 * 十字交叉纹理
	 */
	_decalCross: function() {
		return {
			color: "rgba(0, 0, 0, 0.2)",
			dashArrayX: [
				[1, 0],
				[1, 6]
			],
			dashArrayY: [1, 0, 6, 0],
			symbolSize: 1.0,
			rotation: 0.7853981633974483,
			dirty: false,
			symbol: "rect",
			symbolKeepAspect: true,
			backgroundColor: null,
			maxTileWidth: 512,
			maxTileHeight: 512,
		}
	},

	/**
	 * 矩形方块
	 */
	_decalRect: function() {
		return {
			color: "rgba(0, 0, 0, 0.2)",
			dashArrayX: [
				[6, 6],
				[0, 6, 6, 0]
			],
			dashArrayY: [6, 0],
			symbolSize: 1,
			rotation: 0,
			dirty: false,
			symbol: "rect",
			symbolKeepAspect: true,
			backgroundColor: null,
			maxTileWidth: 512,
			maxTileHeight: 512,
		};
	},

	/**
	 * 三角形
	 */
	_decalTriangle: function() {
		return {
			color: "rgba(0, 0, 0, 0.2)",
			dashArrayX: [
				[9, 9],
				[0, 9, 9, 0]
			],
			dashArrayY: [7, 2],
			symbolSize: 1,
			rotation: 0,
			dirty: false,
			symbol: "triangle",
			symbolKeepAspect: true,
			backgroundColor: null,
			maxTileWidth: 512,
			maxTileHeight: 512,
		};
	}
});

/**
 * 基础方法
 */
CrCharts.prototype.extend({
	/**
	 * 清除全部内容
	 */
	clear: function() {
		this.chart.clear();
	},

	/**
	 * 释放资源
	 */
	dispose: function() {
		if (this.chart != null && this.chart != "" && this.chart != undefined)
			this.chart.dispose();
	},
});

/**
 * 对外函数
 */
CrCharts.prototype.extend({
	/**
	 * 创建搬迁地图
	 * @param {Object} jsonFile 地图的JSON文件
	 * @param {Object} lines 运动线集合
	 * @param {Object} villageMap 村庄坐标Map
	 * @param {Object} villageValue 村庄数据集合
	 * @param {Object} communityMap 社区坐标Map
	 * @param {Object} communityValue 社区数据集合
	 */
	CreateMap: function(jsonFile, lines, villageMap, villageValue, communityMap, communityValue) {
		var self = this;
		var series = [];
		series.push({
			type: 'map',
			map: 'village',
			roam: false,
			itemStyle: {
				areaColor: 'rgb(20,41,87)',
				borderColor: 'rgb(34,115,141)',
				borderWidth: 1,
			},
			emphasis: {
				itemStyle: {
					areaColor: 'rgb(128,128,128)',
				},
				label: {
					color: 'rgb(255,255,255)',
				}
			},
			nameProperty: 'XZQMC',
			aspectScale: 1.0, //默认显示的地图宽高比
			scaleLimit: { //滚轮缩放的极限控制
				min: 1.2, //缩放最小大小
				max: 6 //缩放最大大小
			},
		});
		series.push({
			type: 'lines',
			zlevel: 999,
			animation: false,
			effect: {
				show: true, //是否显示特效
				period: 7, //特效动画的重复时间
				trailLength: 0.1, //尾迹线的长度[0-1]值越大，越长
				color: 'rgb(255,255,255)',
				symbol: 'circle',
				symbolSize: [4, 4]
			},
			lineStyle: {
				color: '#fff',
				width: 2.0,
				curveness: -0.4
			},
			data: self._convertLines(lines, villageMap, communityMap, undefined)
		});
		series.push({
			name: '线条',
			type: 'lines',
			coordinateSystem: 'geo',
			data: self._convertLines(lines, villageMap, communityMap, '')
		})
		series.push({
			name: '户数',
			type: 'scatter',
			coordinateSystem: 'geo',
			data: self._convertData(villageMap, villageValue),
			symbolSize: function(val) {
				return (val[3] * 4) / 1036 + 6;
			},
			label: {
				show: false,
				position: 'right',
				color: 'rgb(162,200,82)',
				fontWeight: 'bold',
				fontFamily: 'TTTGB-Medium',
				shadowColor: 'rgb(255,255,255)',
				shadowBlur: '200',
				textBorderColor: 'rgb(255,255,255)',
				textBorderWidth: 0,
				formatter: '{b}',
			},
			emphasis: {
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 1
				}
			}
		});
		series.push({
			name: '社区',
			type: 'effectScatter',
			coordinateSystem: 'geo',
			data: self._convertData(communityMap, communityValue),
			symbolSize: function(val) {
				return 10;
			},
			label: {
				show: true,
				position: 'right',
				color: 'rgb(255,255,255)',
				fontWeight: 'bold',
				fontFamily: 'SimHei',
				fontSize: 14,
				formatter: '{b}',
			},
			emphasis: {
				itemStyle: {
					borderColor: '#fff',
					borderWidth: 1
				}
			}
		});
		$.get(jsonFile, function(geoJson) {
			echarts.registerMap('village', geoJson);
			var option = {
				visualMap: self._createVisualMap(93, 1129),
				geo: self._createGeo('village', 'XZQMC'),
				series: series,
			}
			self.chart.setOption(option);
		});
	}
});

/**
 * 图形函数
 */
CrCharts.prototype.extend({

	/**
	 * 创建饼图
	 * @param {JOSN} options 配置项
	 * data{Array}:数据集
	 * isAria{boolean}:是否开启纹理渲染，建议大数据量不渲染，否则影响动画速度
	 * radius{int}:饼圆角的大小
	 * startAngle{float}:其实渲染角度，即绘制第一个饼的角度
	 * labelColor{string}:标注文字颜色，接收内容为rgb(),rgba(),16进制颜色值
	 * lineColor{string}:引线颜色，接收内容为rgb(),rgba(),16进制颜色值
	 * perLabelColor{string}:比值颜色，接收内容为rgb(),rgba(),16进制颜色值
	 * @param {String} title 标题
	 */
	createPie: function(options, title) {
		var self = this;
		var decals = [];
		for (var i = 0; i < options.data.length; i++) {
			var idx = i % 5;
			if (idx == 0) {
				decals.push(self._decalSlant());
			} else if (idx == 1) {
				decals.push(self._decalCircle());
			} else if (idx == 2) {
				decals.push(self._decalRect());
			} else if (idx == 3) {
				decals.push(self._decalCross());
			} else if (idx == 4) {
				decals.push(self._decalTriangle());
			}
		}
		/* 配置项 */
		var option = {
			tooltip: {
				trigger: 'item',
				formatter: function(params) {
					var strHtml = "";
					strHtml += "<div class='echarts-tooltip-title'>" + params.seriesName +
						"</div>";
					var unit = options.unit ? options.unit : '';
					strHtml += params.marker + params.name +
						" <font class='echarts-tooltip-row-value'>" + params.value + unit +
						"</font><br>";
					return strHtml;
				},
				position: function(point, params, dom, rect, size) {
					if (size.contentSize[1] + point[1] < size.viewSize[1]) {
						return {
							left: 10,
							top: point[1]
						};
					} else {
						return {
							left: 10,
							top: point[1] - size.contentSize[1],
						};
					}
				},
			},
			aria: {
				enabled: options.isAria == undefined ? true : options.isAria,
				decal: {
					show: true,
					decals: decals,
				}
			},
			stateAnimation: {
				duration: 300,
				easing: "cubicOut",
			},
			animation: "auto",
			animationDuration: 1000,
			animationDurationUpdate: 500,
			animationEasing: "cubicInOut",
			animationEasingUpdate: "cubicInOut",
			animationThreshold: 2000,
			series: [{
				name: title,
				type: 'pie',
				radius: options.radius == undefined ? [10, 90] : options.radius,
				center: ['50%', '50%'],
				roseType: options.roseType == false ? false : 'radius',
				startAngle: options.startAngle == undefined ? 10 : options.startAngle,
				label: {
					formatter: '{a|{b}}{abg|}\n{hr|}\n{per|{d}%}',
					rich: {
						a: {
							color: options.labelColor == undefined ? 'rgb(69,69,69)' : options
								.labelColor,
							lineHeight: 22,
							align: 'center',
							fontFamily: 'TTTGB-Medium',
							fontSize: 13,
						},
						hr: {
							borderColor: options.lineColor == undefined ? 'rgb(69,69,69)' :
								options.lineColor,
							width: '100%',
							borderWidth: 1,
							height: 0
						},
						b: {
							color: '#4C5058',
							fontSize: 10,
							fontWeight: 'bold',
							lineHeight: 33
						},
						per: {
							color: options.perLabelColor == undefined ? 'rgb(123,149,248)' :
								options.perLabelColor,
							align: 'center',
							fontFamily: 'TTTGB-Medium',
							lineHeight: 20,
						}
					}
				},
				labelLine: {
					lineStyle: {
						color: options.lineColor == undefined ? 'rgb(69,69,69)' : options
							.lineColor,
					},
				},
				labelLayout: {
					draggable: false, //是否可以拖动标注
				},
				itemStyle: {
					borderRadius: 0,
					shadowColor: '#5cfbff',
					shadowBlur: 5,
				},
				data: options.data,
				minAngle: options.minAngle ? options.minAngle : 5,
			}]
		};
		self.chart.setOption(option);
	},

	/**
	 * 创建普通饼图
	 * @param {JOSN} jsonData 数据
	 * @param {String} title 标题
	 */
	createNormalPie: function(jsonData, title) {
		var self = this;
		var option = {
			tooltip: {
				trigger: 'item'
			},
			legend: {
				left: 'center',
				show: false,
			},
			series: [{
				name: title,
				type: 'pie',
				radius: ['40%', '80%'],
				center: ['50%', '50%'],
				label: {
					position: 'inside',
					formatter: '{a|{b}}{abg|}\n{per|{d}%}',
					rich: {
						a: {
							color: 'rgb(0,51,102)',
							lineHeight: 22,
							align: 'center',
							fontFamily: 'TTTGB-Medium',
							fontSize: 13,
						},
						hr: {
							borderColor: '#fff',
							width: '100%',
							borderWidth: 2,
							height: 0
						},
						b: {
							color: '#4C5058',
							fontSize: 10,
							fontWeight: 'bold',
							lineHeight: 33
						},
						per: {
							color: '#ffff00',
							align: 'center',
							fontFamily: 'TTTGB-Medium',
						}
					}
				},
				itemStyle: {
					borderRadius: 5,
					borderColor: 'rgb(255,255,255)',
					borderWidth: 0,
					shadowBlur: 1,
				},
				data: jsonData,
			}]
		};
		self.chart.setOption(option);
	},

	/**
	 * 创建横向柱状图
	 * @param {JSON} jsonData 横向柱状图数据
	 * grid:{JSON}{left: right: bottom: top}
	 * labels:[]
	 * datas:[{name: values:[] color:[] lblColor: unit:}]
	 * enabledAria:true/false
	 */
	createHorizontalBar: function(jsonData, units) {
		var self = this;
		/* 更改标签 如果文字超过4个长度 自动换行 */
		self.yAxisLabel.formatter = function(label) {
			let result = '';
			const length = label.length;
			const lineLabelCnt = 6;
			const rowCnt = Math.ceil(length / lineLabelCnt);
			if (length > lineLabelCnt) {
				for (let p = 0; p < rowCnt; p++) {
					let tempStr = '';
					const start = p * lineLabelCnt;
					const end = start + lineLabelCnt;
					if (p == rowCnt - 1) {
						tempStr = label.substring(start, length);
					} else {
						tempStr = label.substring(start, end) + '\n';
					}
					result += tempStr;
				}

			} else {
				result = label;
			}
			return result;
		}
		var decals = [];
		decals.push(self._decalSlant());
		var legendData = [];
		var series = [];
		for (var i = 0; i < jsonData.datas.length; i++) {
			var data = jsonData.datas[i];
			legendData.push(data.name);
			/* 标签配置 */
			var labelOption = {
				show: false,
				position: data.lblPosition == undefined ? 'left' : data.lblPosition,
				distance: data.lblPosition == undefined ? -10 : 10,
				align: 'left',
				verticalAlign: 'middle',
				rotate: 0,
				formatter: function(params) {
					let value = parseFloat(params.value);
					if (value > 0) {
						return value;
					} else {
						return "";
					}
				},
				fontSize: 10,
				color: data.lblColor,
				fontFamily: 'TTTGB-Medium',
				rich: {
					name: {}
				}
			};
			/* 追加单位 */
			if (data.unit != undefined) {
				labelOption.formatter += data.unit;
			}
			/* 追加服务 */
			var item = {
				name: data.name,
				label: labelOption,
				type: 'bar',
				data: data.values,
				itemStyle: {
					shadowColor: '#5cfbff',
					shadowBlur: 5,
				},
				showBackground: true,
				backgroundStyle: {
					color: 'rgba(180,180,180,0.2)'
				},
				barWidth: 10,
			}
			/* 设置柱状图颜色 */
			if (data.color) {
				if (Array.isArray(data.color)) {
					if (data.color.length == 1) {
						item.itemStyle.color = data.color[0];
					} else if (data.color.length >= 2) {
						item.itemStyle.color = {
							type: 'linear',
							x: 0,
							y: 0,
							x2: 1,
							y2: 0,
							colorStops: [{
								offset: 0,
								color: data.color[0], // 0% 处的颜色 
							}, {
								offset: 1,
								color: data.color[1], // 100% 处的颜色 
							}],
							global: false, // 缺省为 false
						}
					}
				} else {
					item.itemStyle.color = data.color
				}
			}
			/* 加入到服务 */
			series.push(item);
		}
		/* 配置项 */
		var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
				position: function(point, params, dom, rect, size) {
					// console.log("鼠标位置=" + point[1] + ",内容高度=" + size.contentSize[1] + ",容器高度=" +
					// 	size.viewSize[1])
					if (size.contentSize[1] + point[1] < size.viewSize[1]) {
						return {
							left: 10,
							top: point[1]
						};
					} else {
						return {
							left: 10,
							top: point[1] - size.contentSize[1],
						};
					}
				},
				formatter: function(params) {
					var strHtml = "";
					strHtml += "<div class='echarts-tooltip-title'>" + params[0].axisValue +
						"</div>";
					for (var i = 0; i < params.length; i++) {
						var unit = units != undefined && units[i] != undefined ? units[
							i] : "";
						var value = params[i].data > 0 ? params[i].data : params[i]
							.data * (-1);
						if (value < 0.0001) {
							continue;
						}
						strHtml += params[i].marker + params[i].seriesName +
							" <font class='echarts-tooltip-row-value'>" +
							value + unit + "</font>";
						if (i != params.length - 1) {
							strHtml += "<br>";
						}
					}
					return strHtml;
				}
			},
			aria: {
				enabled: jsonData.enabledAria == undefined ? false : jsonData.enabledAria,
				decal: {
					show: true,
					decals: decals,
				}
			},
			grid: {
				left: 100,
				right: 30,
				bottom: 30,
				top: 30,
			},
			legend: {
				type: 'scroll',
				pageTextStyle: {
					color: 'rgb(255,255,255)',
				},
				pageIconColor: 'rgb(255,255,0)',
				pageIconInactiveColor: 'rgb(203,203,203)',
				data: legendData,
				textStyle: {
					color: this.legendTextColor == undefined ? 'rgb(69,69,69)' : this.legendTextColor,
					fontSize: 13,
					fontFamily: 'TTTGB-Medium',
				},
				itemGap: 5,
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01],
				axisLabel: self.xAxisLabel,
				axisLine: self.xAxisLine,
				splitLine: self.splitLine,
			},
			yAxis: {
				type: 'category',
				data: jsonData.labels,
				axisLabel: self.yAxisLabel,
				axisLine: self.yAxisLine,
				splitLine: self.splitLine,
			},
			series: series,
		};
		/* 此处进行修改 取消设置dataZoomY 改为根据容器高度自动设置 */
		let visibleBarCount = Math.ceil((self.chart.getHeight() * 20) / 480);
		let visibleSize = Math.ceil(visibleBarCount / option.series.length);
		let endvalue = visibleSize > 2 ? visibleSize - 1 : '1';
		option.dataZoom = [{
			width: 20,
			startValue: 0,
			endValue: endvalue,
			yAxisIndex: [0],
			zoomOnMouseWheel: false, // 关闭滚轮缩放
			moveOnMouseWheel: true, // 开启滚轮平移
			moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移 
			zoomLock: true,
		}];
		if (jsonData.grid != undefined) {
			if (jsonData.grid.left && jsonData.grid.left < 100) jsonData.grid.left = 100;
			option.grid = jsonData.grid;
		}
		self.chart.setOption(option);
	},

	/**
	 * 创建竖向柱状图
	 * @param {JSON} jsonData 数据集
	 * @param {int} left 距离左侧的距离
	 * @param {boolean} enabledAria 是否使用花纹
	 * @param {array} units 单位名称 
	 */
	createVerticalBar: function(jsonData, left, enabledAria, units) {
		var self = this;
		var grid = {
			right: 3,
			bottom: jsonData.gridBottom != undefined ? jsonData.gridBottom : 20,
			top: jsonData.gridTop != undefined ? jsonData.gridTop : 35,
			left: left == undefined ? 80 : left,
		};
		if (jsonData.xrotate != undefined) {
			self.xAxisLabel.rotate = jsonData.xrotate;
		}
		var legendData = [];
		var xData = jsonData.labels;
		var servies = [];
		var decals = [];
		decals.push(self._decalSlant());
		/*数据配置*/
		for (var i = 0; i < jsonData.datas.length; i++) {
			var sData = jsonData.datas[i];
			legendData.push({
				name: sData.name,
			});
			/* 标签配置 */
			var labelOption = {
				show: false,
				position: 'top',
				distance: 5,
				align: 'left',
				verticalAlign: 'middle',
				rotate: 90,
				formatter: function(param) {
					return param.value == 0.1 ? "" : param.value;
				},
				fontSize: 10,
				textColor: self.labelColor == undefined ? 'rgb(69,69,69)' : self.labelColor,
				fontFamily: 'TTTGB-Medium',
				rich: {
					name: {}
				}
			};
			if (sData.label != undefined) {
				if (sData.label.position != undefined) labelOption.position = sData.label
					.position;
				if (sData.label.rotate != undefined) labelOption.rotate = sData.label.rotate;
				if (sData.label.formatter != undefined) labelOption.formatter = sData.label
					.formatter;
			}
			var service = {
				name: sData.name,
				type: 'bar',
				label: labelOption,
				emphasis: {
					focus: 'series'
				},
				data: sData.data,
				itemStyle: {
					color: sData.color,
					shadowColor: '#5cfbff',
					shadowBlur: 5,
				},
				showBackground: true,
				backgroundStyle: {
					color: 'rgba(180,180,180,0.2)'
				},
				barWidth: 10,
			};
			if (sData.stack != undefined) service.stack = sData.stack;
			servies.push(service);
		}
		/* 图表配置 */
		var option = {
			tooltip: {
				show: true,
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
				position: function(point, params, dom, rect, size) {
					if (size.contentSize[1] + point[1] < size.viewSize[1]) {
						return {
							left: 10,
							top: point[1]
						};
					} else {
						return {
							left: 10,
							top: 0, //point[1] - size.contentSize[1],
						};
					}
				},
				formatter: function(params) {
					var strHtml = "";
					strHtml += "<div class='echarts-tooltip-title'>" + params[0].axisValue +
						"</div>";
					for (var i = 0; i < params.length; i++) {
						var unit = units != undefined && units[i] != undefined ? units[
							i] : "";
						var value = params[i].data > 0 ? params[i].data : params[i]
							.data * (-1);
						if (value < 0.0001) {
							continue;
						}
						strHtml += params[i].marker + params[i].seriesName +
							" <font class='echarts-tooltip-row-value'>" +
							value + unit + "</font>";
						if (i != params.length - 1) {
							strHtml += "<br>";
						}
					}
					return strHtml;
				}
			},
			aria: {
				enabled: enabledAria == undefined ? false : enabledAria,
				decal: {
					show: true,
					decals: decals,
				}
			},
			legend: {
				type: 'scroll',
				pageTextStyle: {
					color: 'rgb(255,255,255)',
				},
				pageIconColor: 'rgb(255,255,0)',
				pageIconInactiveColor: 'rgb(203,203,203)',
				data: legendData,
				textStyle: {
					color: this.legendTextColor == undefined ? 'rgb(69,69,69)' : this.legendTextColor,
					fontSize: 13,
					fontFamily: 'TTTGB-Medium',
				},
				itemGap: 5,
			},
			grid: grid,
			xAxis: [{
				type: 'category',
				axisTick: {
					show: false
				},
				data: xData,
				axisLabel: self.xAxisLabel,
				axisLine: self.xAxisLine,
			}],
			yAxis: [{
				type: 'log',
				min: 1,
				axisLabel: self.yAxisLabel,
				axisLine: self.yAxisLine,
				splitLine: self.splitLine,
			}],
			series: servies,
		};

		/* 通过自动配置 使以上方法失效 */
		/* 获取柱子总数 */
		let barCount = servies[0].data.length * servies.length;
		let endValue = '1';
		let isZoom = false;
		if (self.pageSize.width <= self.PageSize.smartSize && barCount >= 15) {
			endValue = Math.floor(15 / servies.length);
			isZoom = true;
		} else if (self.pageSize.width > self.PageSize.smartSize && self.pageSize.width <= self.PageSize
			.middleSize && barCount >= 30) {
			endValue = Math.floor(30 / servies.length);
			isZoom = true;
		}
		/* 设置是否显示水平滚动 */
		//jsonData.dataZoomX != undefined && jsonData.dataZoomX == true
		if (isZoom) {
			option.dataZoom = [{
				type: 'slider',
				xAxisIndex: [0],
				filterMode: 'filter',
				startValue: 0,
				endValue: endValue,
				height: 20,
				zoomLock: true,
			}]
		}
		self.chart.setOption(option);
	},

	/**
	 * 创建折线图
	 * @param {JSON} jsonData 数据集
	 * @param {Array} units 单位数组
	 */
	createLine: function(jsonData, units) {
		var self = this;
		var series = [];
		var legendData = [];
		var xData = jsonData.labels;
		var grid = {
			right: jsonData.gridRight != undefined ? jsonData.gridRight : 20,
			bottom: jsonData.gridBottom != undefined ? jsonData.gridBottom : 20,
			top: jsonData.gridTop != undefined ? jsonData.gridTop : 40,
			left: jsonData.gridLeft == undefined ? 30 : jsonData.gridLeft,
		};
		for (var i = 0; i < jsonData.datas.length; i++) {
			var lData = jsonData.datas[i];
			legendData.push(lData.name);
			series.push({
				name: lData.name,
				type: 'line',
				yAxisIndex: 0,
				symbolSize: 4,
				itemStyle: {
					color: lData.color,
					borderWidth: 2,
					shadowColor: '#5cfbff',
					shadowBlur: 5,
				},
				data: lData.values,
				smooth: true,
				areaStyle: {
					opacity: jsonData.areaStyle == undefined ? 0 : jsonData.areaStyle
						.opacity,
				},
				barMinWidth: 30,
			});
			if (lData.label != undefined) {
				var unit = lData.label.unit == undefined ? '' : lData.label.unit;
				series[i].label = {
					show: lData.label.show == undefined ? false : lData.label.show,
					position: 'top',
					distance: 10,
					align: 'center',
					verticalAlign: 'top',
					rotate: lData.label.rotate == undefined ? 0 : lData.label.rotate,
					formatter: '{c}' + unit,
					fontSize: 12,
					color: lData.label.color == undefined ? 'rgb(255,255,255)' : lData.label
						.color,
					fontFamily: 'TTTGB-Medium',
					rich: {
						name: {}
					}
				}
			}
		}
		/* 设置横轴标注旋转角度 */
		if (jsonData.xrotate != undefined) self.xAxisLabel.rotate = jsonData.xrotate;
		/* 配置项 */
		var option = {
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				},
				position: function(point, params, dom, rect, size) {
					if (size.contentSize[1] + point[1] < size.viewSize[1]) {
						return {
							left: 10,
							top: point[1]
						};
					} else {
						return {
							left: 10,
							top: point[1] - size.contentSize[1],
						};
					}
				},
				formatter: function(params) {
					var strHtml = "";
					strHtml += "<div class='echarts-tooltip-title'>" + params[0].axisValue +
						"</div>";
					for (var i = 0; i < params.length; i++) {
						var unit = units != undefined && units[i] != undefined ? units[
							i] : "";
						var value = params[i].data > 0 ? params[i].data : params[i]
							.data * (-1);
						if (value < 0.0001) {
							continue;
						}
						strHtml += params[i].marker + params[i].seriesName +
							" <font class='echarts-tooltip-row-value'>" +
							value + unit + "</font>";
						if (i != params.length - 1) {
							strHtml += "<br>";
						}
					}
					return strHtml;
				}
			},
			legend: {
				type: 'scroll',
				x: 'center',
				y: '0px',
				icon: 'circle',
				data: legendData,
				pageTextStyle: {
					color: 'rgb(255,255,255)',
				},
				pageIconColor: 'rgb(255,255,0)',
				pageIconInactiveColor: 'rgb(203,203,203)',
				data: legendData,
				textStyle: {
					color: this.legendTextColor == undefined ? 'rgb(69,69,69)' : this.legendTextColor,
					fontSize: 13,
					fontFamily: 'TTTGB-Medium',
				},
			},
			grid: grid,
			xAxis: [{
				type: 'category',
				data: xData,
				axisLine: self.xAxisLine,
				axisLabel: self.xAxisLabel,
				axisTick: {
					show: false,
				},
			}],
			yAxis: [{
				type: 'value',
				axisLine: self.yAxisLine,
				axisLabel: self.yAxisLabel,
				splitLine: self.splitLine,
			}],
			series: series,
		};
		self.chart.setOption(option);
	},

	/**
	 * 创建桑基图
	 * @param {JSON} jsonData 数据
	 * @param {string} unit 单位
	 */
	createSankey: function(jsonData, unit) {
		var self = this;
		var data = [];
		var links = [];
		for (var i in jsonData.data) {
			var item = jsonData.data[i];
			/* 加入数据 */
			data.push({
				name: item.name,
			})
			for (var idx in item.childs) {
				var child = item.childs[idx];
				data.push({
					name: child.name,
				})
				/* 加入链表 */
				links.push({
					source: item.name,
					target: child.name,
					value: child.value,
					fvalue: item.value,
					unit: unit,
				});
				if (child.childs && child.childs.length > 0) {
					for (let sChild of child.childs) {
						data.push({
							name: sChild.name,
						})
						links.push({
							source: child.name,
							target: sChild.name,
							value: sChild.value,
							fvalue: child.value,
							unit: unit,
						});
					}
				}
			}
		}
		option = {
			tooltip: {
				trigger: 'item',
				position: function(point, params, dom, rect, size) {
					if (size.contentSize[1] + point[1] < size.viewSize[1]) {
						return {
							left: 10,
							top: point[1]
						};
					} else {
						return {
							left: 10,
							top: point[1] - size.contentSize[1],
						};
					}
				},
				formatter: function(params) {
					if (params.dataType == 'node') {
						var dataName = params.data.name;
						var item = undefined;
						for (let link of links) {
							/* 说明含有子节点 */
							if (link.source == dataName && !item) {
								item = {
									name: link.source,
									value: link.fvalue,
									unit: link.unit,
									childs: [link],
								}
							} else if (link.source == dataName && item) {
								item.childs.push(link);
							}
						}
						/* 说明该节点没有节点 */
						if (!item) {
							for (let link of links) {
								if (link.target === dataName) {
									item = {
										name: link.target,
										value: link.fvalue,
										unit: link.unit,
									}
									break;
								}
							}
						}
						/* 通过判断是否存在节点 进行展示 */
						if (item) {
							var strHtml = "";
							strHtml += "<div class='echarts-tooltip-title'>" + item.name +
								"[" + item.value.toFixed(2) + item.unit + "]</div>";
							if (item.childs && item.childs.length > 0) {
								for (let i in item.childs) {
									var child = item.childs[i];
									strHtml += child.target +
										" <font class='echarts-tooltip-row-value'>" +
										parseFloat(child.value).toFixed(2) + child.unit + "";
									strHtml += "<占比" + ((child.value / child.fvalue) * 100).toFixed(
											2) +
										"%>";
									strHtml += "</font>";
									if (i < item.childs.length - 1) {
										strHtml += "<br>";
									}
								}
							}
							return strHtml;
						} else {
							return;
						}
					}

				}
			},
			series: {
				type: 'sankey',
				layout: 'none',
				right: jsonData.labelWidth ? jsonData.labelWidth + 10 : 70,
				nodeGap: jsonData.nodeGap ? jsonData.nodeGap : 8,
				draggable: false, //禁止拖拽
				emphasis: {
					focus: 'adjacency'
				},
				data: data,
				links: links,
				label: {
					rotate: 0,
					formatter: function(params) {
						// console.log(JSON.stringify(params));
						return params.name;
					},
					color: "rgba(255,255,255,1.0)",
					fontSize: 12,
					fontFamily: 'TTTGB-Medium',
					width: jsonData.labelWidth ? jsonData.labelWidth : 60,
					overflow: 'break',
				},
				itemStyle: {
					shadowColor: '#5cfbff',
					shadowBlur: 5,
				},
				lineStyle: {
					color: 'gradient',
					opacity: 0.2,
				}
			}
		};
		self.chart.setOption(option);
	},

	/**
	 * 创建混合图
	 * @param {Object} jsonData 混合Data '{value} ml'
	 */
	createBlend: function(jsonData) {
		var self = this;
		var legendData = [];
		var yAxis = [];
		var series = [];
		var xAxis = jsonData.labels;
		for (var i = 0; i < jsonData.axixs.length; i++) {
			var axis = jsonData.axixs[i];
			yAxis.push({
				type: 'value',
				name: axis.name,
				min: axis.minValue,
				max: axis.maxValue,
				interval: axis.spaceValue,
				position: axis.position,
				offset: axis.offset,
				axisLabel: {
					formatter: axis.formatter,
					color: axis.color,
					fontSize: 12,
					fontFamily: 'TTTGB-Medium',
				},
				axisLine: {
					show: true,
					lineStyle: {
						color: axis.color,
					},
				},
				splitLine: self.splitLine,
			});
		}
		for (var i = 0; i < jsonData.datas.length; i++) {
			var data = jsonData.datas[i];
			legendData.push(data.name);
			series.push({
				name: data.name,
				type: data.type,
				data: data.data,
				yAxisIndex: data.yAxisIndex,
				itemStyle: {
					color: data.color,
					shadowColor: '#5cfbff',
					shadowBlur: 5,
				},
				smooth: true,
			})
		}
		var option = {
			grid: {
				right: jsonData.right,
				left: jsonData.left,
				bottom: jsonData.bottom,
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'cross',
					crossStyle: {
						color: '#999'
					}
				}
			},
			legend: {
				data: legendData,
				x: 'center',
				y: '0px',
				textStyle: {
					color: '#FFFFFF',
					fontSize: 13,
				},
			},
			xAxis: [{
				type: 'category',
				data: xAxis,
				axisPointer: {
					type: 'shadow',
				},
				axisLabel: self.xAxisLabel,
				axisLine: self.xAxisLine,
			}],
			yAxis: yAxis,
			series: series,
		}
		self.chart.setOption(option);
	},

	/**
	 * 创建地图
	 * @param {Object} jsonFile
	 * @param {Object} valueJson
	 * @param {Object} valueLegend
	 * @param {Object} showName
	 * @param {Object} unit
	 */
	createMap: function(jsonFile, valueJson, valueLegend, showName, unit) {
		var self = this;
		var minValue = 5000000000,
			maxValue = 0;
		/* 循环获取最大最小值 */
		for (var i = 0; i < valueJson.length; i++) {
			if (valueJson[i].value < minValue) {
				minValue = valueJson[i].value;
			}
			if (valueJson[i].value > maxValue) {
				maxValue = valueJson[i].value;
			}
		}
		var map = {
			min: minValue,
			max: maxValue,
			realtime: true, //拖拽时是否实时更新
			calculable: false, //是否显示拖拽的手柄
			show: true, //是否显示拖拽手柄
			textStyle: {
				color: 'rgb(255,255,0)',
				fontFamily: 'TTTGB-Medium',
			},
			inRange: {
				color: ['rgb(61,201,61)', 'rgb(5,78,5)']
			},
			pieces: valueLegend,
			left: 5,
		}
		$.get(jsonFile, function(geoJson) {
			echarts.registerMap('village', geoJson);
			var option = {
				visualMap: map,
				tooltip: {
					trigger: 'item',
					formatter: '{b}</br>{c}' + unit,
				},
				series: [{
					name: '人口分布',
					type: 'map',
					mapType: 'village',
					nameProperty: showName,
					roam: true,
					aspectScale: 1.0, //默认显示的地图宽高比
					scaleLimit: { //滚轮缩放的极限控制
						min: 1.2, //缩放最小大小
						max: 6 //缩放最大大小
					},
					label: {
						show: false,
						color: 'rgb(255,255,255)',
						fontFamily: 'TTTGB-Medium',
					},
					borderColor: 'rgb(34,115,141)',
					data: valueJson,
					left: 160
				}],
			}
			self.chart.setOption(option);
		});
	},

	/**
	 * 创建指标
	 * @param {JSON} jsonData 数据JSON
	 * {title: min: max: value: unit:}
	 */
	createWatch: function(jsonData) {
		var self = this;
		var option = {
			series: [{
				type: 'gauge',
				min: jsonData.min,
				max: jsonData.max,
				axisLine: {
					lineStyle: {
						width: 15,
						color: [
							[0.3, 'rgb(70,197,69)'],
							[0.7, '#37a2da'],
							[1, '#fd666d']
						]
					}
				},
				pointer: {
					itemStyle: {
						color: 'auto'
					}
				},
				axisTick: {
					distance: -15,
					length: 8,
					lineStyle: {
						color: '#fff',
						width: 2
					}
				},
				splitLine: {
					distance: -15,
					length: 15,
					lineStyle: {
						color: '#fff',
						width: 2
					}
				},
				axisLabel: {
					color: 'auto',
					distance: -19,
					fontSize: 12,
					fontWeight: 'bold',
				},
				detail: {
					valueAnimation: true,
					formatter: '{value}' + jsonData.unit,
					color: 'auto',
					fontSize: 20,
					fontWeight: 'bold',
					// color: 'rgb(255,255,255)',
				},
				data: [{
					value: jsonData.value,
					name: jsonData.title,
					title: {
						show: true,
						offsetCenter: [0, '120%'],
						color: 'rgb(255,255,0)',
						fontSize: 14,
						fontWeight: 'bold',
					}
				}]
			}]
		};
		self.chart.setOption(option);
	},

	/**
	 * 创建雷达图
	 * @param {JSON} jsonData 雷达图数据
	 */
	createRadar: function(jsonData) {
		var self = this;
		/* 获取最大值 */
		var maxValue = 0;
		for (var i = 0; i < jsonData.datas.length; i++) {
			var dataItem = jsonData.datas[i];
			for (var j = 0; j < dataItem.values.length; j++) {
				if (dataItem.values[j] > maxValue) {
					maxValue = dataItem.values[j];
				}
			}
		}
		/* 构建指示器 */
		var indicator = [];
		for (var i = 0; i < jsonData.labels.length; i++) {
			indicator.push({
				name: jsonData.labels[i],
				max: maxValue,
			})
		}
		/* 构建数据集合 */
		var datas = [];
		for (var i = 0; i < jsonData.datas.length; i++) {
			var dataItem = jsonData.datas[i];
			datas.push({
				itemStyle: {
					color: dataItem.color,
				},
				value: dataItem.values,
				name: dataItem.name,
			})
		}
		/* 构建图例 */
		var ldatas = [];
		for (var i = 0; i < jsonData.datas.length; i++) {
			ldatas.push(jsonData.datas[i].name);
		}
		/* 配置项 */
		var option = {
			legend: {
				data: ldatas,
				show: jsonData.lengend,
				textStyle: {
					color: 'rgb(255,255,0)',
					fontFamily: 'TTTGB-Medium',
				},
				icon: 'roundRect',
			},
			radar: {
				// shape: 'circle',
				name: {
					color: jsonData.lblColor,
					fontSize: jsonData.lblSize == undefined ? 13 : jsonData.lblSize,
					fontFamily: 'TTTGB-Medium',
					formatter: function(value, indicator) {
						var val = value.split(';');
						if (val.length == 1) {
							return value;
						} else {
							return '{a|' + val[0] + '}' + '\n' + '{b|' + val[1] + '}';
						}
					},
					rich: {
						a: {
							color: jsonData.lblColor,
							fontSize: 13,
							fontFamily: 'TTTGB-Medium',
							lineHeight: 20,
						},
						b: {
							color: 'rgb(255,255,255)',
							fontSize: 11,
							fontFamily: 'TTTGB-Medium',
							backgroundColor: '#666',
							fontFamily: 'SimHei',
							padding: 4,
							borderRadius: 2,
							align: 'center',
						}
					}
				},
				indicator: indicator,
				splitLine: {
					lineStyle: {
						color: 'rgb(255,255,255,0.35)',
						type: 'dashed'
					},
				},
				axisLine: {
					lineStyle: {
						color: 'rgb(255,255,255,0.35)',
						type: 'dashed'
					}
				}
			},
			series: [{
				type: 'radar',
				data: datas,
			}]
		};
		if (jsonData.lengend) {
			option.radar.center = ['50%', '55%'];
			option.radar.radius = '55%';
		}
		self.chart.setOption(option);
	},

	/**
	 * 重置大小
	 */
	resize: function() {
		this.chart.resize();
	},
});