LineChart_wev8.js 5.39 KB
if(typeof(Mobile_NS) == 'undefined'){
	Mobile_NS = {};
}

Mobile_NS.LineChart = {};

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

Mobile_NS.LineChart.build = function(p){
	var sql = p.sql;
	var $chartContainer = $("#NMEC_" + p.id).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_markLine_show = p["isShowMarkLine"] == "1";
		var op_label_show = p["isShowLabel"] == "1";
		var op_area_show = p["isShowArea"] == "1";

		var op_series = [];
		for (var i = 0; i < op_series_meta.length; i++) {
			var op_series_one = {
				name: op_series_meta[i]["name"],
				type: 'line',
				data: op_series_meta[i]["data"]
			};
			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']);
						              }
				                }
				           }
	                }
				};
			}
			if (op_label_show) {
				op_series_one.label = {
					normal: {
						show: true,
		                formatter:function(obj){
		                	 return require("mec").formatNumber(obj.value, p['labelFormat']);
			            },
						position: 'top'
					}
				};
			}
			if (op_area_show) {
				op_series_one.areaStyle = { normal: {} };
			}

			op_series.push(op_series_one);
		}
		var grid = {};
		grid.right = p['gridright'] || (op_markLine_show ? 30 : 20);
		grid.top = op_label_show ? 30 : 15;
		grid.left =  p['gridleft'] || 10;
		grid.bottom = op_legend_show ? 35 : 10;
		grid.containLabel = true;

		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 option = {
			tooltip: {
				confine: true,
				trigger: 'axis'
			},
			grid: grid,
			legend: {
				show: op_legend_show,
				data: op_legend_data, //['蒸发量','降水量'],
				bottom: 5
			},
			xAxis: {
				type: 'category',
				boundaryGap: false,
				data: op_category_data,
				axisLabel: axisLabel
			},
			yAxis: {
				type: 'value'
			},
			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: "周一", "温度": "11" },
			{ name: "周二", "温度": "7" },
			{ name: "周三", "温度": "15" },
			{ name: "周四", "温度": "13" },
			{ name: "周五", "温度": "12" },
			{ name: "周六", "温度": "13" },
			{ name: "周日", "温度": "10" }
		];

		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是否拼写正确
	});
};