BarChart_wev8.js 6.64 KB
if(typeof(Mobile_NS) == 'undefined'){
	Mobile_NS = {};
}

Mobile_NS.BarChart = {};

Mobile_NS.BarChart.onload = function(p){
	this.build(p);
};

Mobile_NS.BarChart.build = function(p){
	var theId = p["id"];
	var sql = p["sql"];
	var $chartContainer = $("#NMEC_" + theId).find(".wev-chart").height(p.height || 300);
    if(p.width){
        $chartContainer.width(p.width);
    }
	var _build = function (datas) {
		// 基于准备好的dom,初始化echarts实例
		var theChart = echarts.init($chartContainer[0]);

		var op_legend_show = p["isShowLegend"] == "1";
		var op_legend_data = [];

		var op_category_data = [];

		var op_series_meta = [];

		for (var i = 0; i < datas.length; i++) {
			var da = datas[i];

			var j = 0;
			for (var key in da) {
				var value = da[key];
				if (i == 0 && j > 0) {
					op_legend_data.push(key);
				}
				if (j == 0) {
					op_category_data.push(value);
				}
				if (j > 0) {
					var op_series_one = op_series_meta[j - 1];
					if (!op_series_one) {
						op_series_one = {};
						op_series_meta[j - 1] = op_series_one;
					}
					if (i == 0) {
						op_series_one["name"] = key;
					}
					var op_series_one_data = op_series_one["data"];
					if (!op_series_one_data) {
						op_series_one_data = [];
						op_series_one["data"] = op_series_one_data;
					}
					op_series_one_data.push(value);
				}
				j++;
			}
		}

		var op_markPoint_show = p["isShowMarkPoint"] == "1";
		var op_markLine_show = p["isShowMarkLine"] == "1";

		var op_series = [], colorArr = [];
		if (p["color"]) colorArr = p["color"].split(",");
		var isSingle = op_series_meta.length == 1 && colorArr.length > 0;

		for (var i = 0; i < op_series_meta.length; i++) {
			var series_data = op_series_meta[i]["data"];
			var max = Math.max.apply(null, op_series_meta[i]["data"]),
				min = Math.min.apply(null, op_series_meta[i]["data"]);
			if (isSingle) {
				series_data = [];
				op_series_meta[i]["data"].forEach(function (item, index) {
					if (max == item) max = index;
					if (min == item) min = index;
					series_data.push({
						value: item,
						itemStyle: {
							color: colorArr[index%colorArr.length]
						}
					});
				});
			}
			var op_series_one = {
				name: op_series_meta[i]["name"],
				type: 'bar',
				data: series_data,
				barMaxWidth: 35
			};
			if (op_markPoint_show) {
				op_series_one.markPoint = {
					data: [
						{ type: 'max', name: '最大值', itemStyle:{
							color: isSingle ? colorArr[max] : null
						}},
						{ type: 'min', name: '最小值', itemStyle:{
							color: isSingle ? colorArr[min] : null
						}}
					],
		            itemStyle: {
			                normal: {
			                    label: {
			                        show: true,
			                        formatter:function(obj){
			                        	 return require("mec").formatNumber(obj.value, p.labelFormat);
					                }
			                     }
	                		}
	                },
					symbolSize: 50
				};
			}
			if (op_markLine_show) {
				op_series_one.markLine = {
					data: [
						{ type: 'average', name: '平均值' }
					],
	                itemStyle: {
			              normal: {
			                  label: {
			                      show: true,
			                      formatter:function(obj){
			                    	  return require("mec").formatNumber(obj.value, p.labelFormat);
					              }
			                   }
			              }
	                }
				};
			}

			op_series.push(op_series_one);
		}

		var chartType = p["chartType"];
		var axisLabelInterval = p["axisLabelInterval"] == "1" ? 0 : 'auto';
		var axisLabelRotate = (p["axisLabelRotate"] == "" || isNaN(p["axisLabelRotate"])) ? 0 : Number(p["axisLabelRotate"]);
		var axisLabelFontSize = (p["axisLabelFontSize"] == "" || isNaN(p["axisLabelFontSize"])) ? 12 : Number(p["axisLabelFontSize"]);

		var axisLabel = {
			interval: axisLabelInterval,
			rotate: axisLabelRotate,
			fontSize: axisLabelFontSize
		};

		var categoryAxis = [{
			type: 'category',
			data: op_category_data,
			axisLabel: axisLabel
		}];
		var valueAxis = [{
			type: 'value'
		}];
		var grid = {};

		if (chartType == "1") {
			grid.right = p['gridright'] || (op_markLine_show ? 30 : 12);
			//在最大和最小柱状上显示具体的数值时调整标题高度
			grid.top = op_markPoint_show ? 45 : 15;
		} else {
			grid.right = p['gridright'] || (op_markPoint_show ? 20 : 12);
			grid.top = op_markPoint_show ? 45 : (op_markLine_show ? 20 : 15);
		}

		grid.left = p['gridleft'] || 10;
		grid.bottom = op_legend_show ? 35 : 10;
		grid.containLabel = true;

		var option = {
			tooltip: {
				confine: true,
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			grid: grid,
			legend: {
				show: op_legend_show,
				data: op_legend_data, //['蒸发量','降水量'],
				bottom: 5
			},
			calculable: true,
			xAxis: (chartType == "1") ? categoryAxis : valueAxis,
			yAxis: (chartType == "1") ? valueAxis : categoryAxis,
			series: op_series,
			toolbox: {
				showTitle: false,
				itemSize: 28,
				right: grid.right,
				top: grid.top,
				feature: {
					myTool: {
						show: p["advancedSearch"] == '1',
						icon: 'image:///mobilemode/mobile/images/plugin/filter.png',
					}
				}
			}
		};

		var color = p["color"];
		if (color) {
			option.color = color.split(",");
		}

		// 使用刚指定的配置项和数据显示图表。
		theChart.setOption(option);

		var clickUrl = p["clickUrl"];
		if (clickUrl && p["_mode"] == "1") {
			theChart.on('click', function (params) {
				var ckUrl = clickUrl.replace(/\{_chart_name}/g, params.name).replace(/\{_chart_seriesName}/g, params.seriesName).replace(/\{_chart_value}/g, params.value);
				$u(ckUrl);
			});
		}
	};

	if(p.isdefault) {
		var datas = [
			{ name: "一月", "降水量": "3.5" },
			{ name: "二月", "降水量": "7" },
			{ name: "三月", "降水量)": "4.5" },
		];

		return _build(datas);
	}
	
	var msgStyle = "color: #bbb;font-size: 14px;padding: 9px 5px 9px 22px;";
	var msg = "", multiLJson = p['multiLJson'] || {};
	if(!$.trim(sql)){
		msg = multiLJson['4205'];//图表信息设置不完整,未配置数据来源SQL
	}else if (/\{(.*?)\}/.test(sql)) {
		msg = multiLJson['4206'];//SQL中可能包含待解析的参数变量,需运行时显示
	}
	if(msg){
		return $chartContainer.html("<div style=\""+msgStyle+"\">"+msg+"</div>");
	}
	
	var _u = require("utils");

	_u.api("designer/plugin", {
		action: "getDataBySQLWithEChart",
		notification: false,
		data: {
			datasource: p.datasource,
			sql: compressByLZ(sql)
		}
	}, function (res) {
		_build(res.data);
	}, function () {
		$chartContainer.html("<div style=\""+msgStyle+"\">"+multiLJson['4208']+"</div>");//查询数据来源SQL时出现错误,请检查SQL是否拼写正确
	});
};