PieChart_wev8.js 4.2 KB
if(typeof(Mobile_NS) == 'undefined'){
	Mobile_NS = {};
}

Mobile_NS.PieChart = {};

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

Mobile_NS.PieChart.build = function(p){
	var sql = p.sql;
	var $chartContainer = $("#NMEC_" + p.id).find(".wev-chart").height(p.height || 250);
    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_series_label_show = p["isShowLabel"] == "1";
		var op_series_date = [];

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

			var j = 0;
			for (var key in da) {
				var value = da[key];
				if (j == 0) {
					op_legend_data.push(value);
				}

				if (j == 0) {
					d["name"] = value;
				}
				if (j == 1) {
					d["value"] = value;
				}
				j++;
			}

			op_series_date.push(d);
		}
		var chartType = p["chartType"];
		var op_series_radius;
		var radiusMax = parseInt(p["radius"]);
		if (isNaN(radiusMax)) {
			radiusMax = 65;
		}
		if (chartType == "1") {
			op_series_radius = ["0", radiusMax + "%"];
		} else {
			op_series_radius = [(radiusMax - 15) + "%", radiusMax + "%"];
		}

		var labelPosition = p["labelPosition"] || "1";
		var labelFontSize = (p["labelFontSize"] == "" || isNaN(p["labelFontSize"])) ? 12 : Number(p["labelFontSize"]);
		var labelLineLength = (p["labelLineLength1"] == "" || isNaN(p["labelLineLength1"])) ? 5 : Number(p["labelLineLength1"]);
		var labelLineLength2 = (p["labelLineLength2"] == "" || isNaN(p["labelLineLength2"])) ? 10 : Number(p["labelLineLength2"]);

		var option = {
			tooltip: {
				confine: true,
				trigger: 'item',
				formatter: function (datas) {
			    	var res = datas.name+ ':';
			    	var value = datas.value;
					value = require("mec").formatNumber(value, p.labelFormat);
					res += value + "(" + datas.percent +"%)";
				    return res;
		    	}
			},
			legend: {
				show: op_legend_show,
				data: op_legend_data, //['蒸发量','降水量'],
				bottom: 5
			},
			series: [
				{
					type: 'pie',
					radius: op_series_radius,
					label: {
						normal: {
							show: op_series_label_show,
							position: labelPosition == "2" ? 'inside' : 'outside',
							textStyle: {
								fontSize: labelFontSize
							}
						}
					},
					labelLine: {
						normal: {
							show: op_series_label_show,
							length: labelLineLength,
							length2: labelLineLength2
						}
					},
					data: op_series_date
				}
			],
			toolbox: {
				showTitle: false,
				itemSize: 28,
				right: 20,
				top: 20,
				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_value}/g, params.value);
				$u(ckUrl);
			});
		}
	};

	if (p.isdefault) {
		var datas = [
			{ name: "IOS", value: "40" },
			{ name: "Android", value: "45" },
			{ name: "其他", value: "15" }
		];

		return _build(datas);
	}

	var msgStyle = "color: #bbb;font-size: 14px;padding: 35px 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是否拼写正确
	});
};