RadarChart_wev8.js 3.96 KB
if (typeof (Mobile_NS) == 'undefined') {
	Mobile_NS = {};
}

Mobile_NS.RadarChart = {};

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

Mobile_NS.RadarChart.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) {
		var vm = (function (dm) {
			var vm = {};

			vm.height = dm.height;
			vm.width = dm.width;

			//图例
			vm.legend = {
				show: dm.isShowLegend == "1",
				bottom: 5
			};

			vm.radar = {
				radius: parseInt(dm.radius) + "%",
				shape: dm.chartType == "1" ? "polygon" : "circle"
			};

			vm.color = dm.color;
			return vm;
		})(p);

		// 基于准备好的dom,初始化echarts实例
		var theChart = echarts.init($chartContainer[0]);

		var op_legend_data = [];

		var op_radar_indicator = [];

		var op_series_datas = [];

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

			var j = 0;
			for (var key in da) {
				if (key == 'max') {
					break;
				}
				var value = da[key];
				if (i == 0 && j > 0) {
					op_legend_data.push(key);
				}
				if (j == 0) {
					var indicator_one = { name: value }
					da.max && (indicator_one.max = da.max);
					op_radar_indicator.push(indicator_one);
				}
				if (j > 0) {
					var op_series_one = op_series_datas[j - 1];
					if (!op_series_one) {
						op_series_one = {};
						op_series_datas[j - 1] = op_series_one;
					}
					if (i == 0) {
						op_series_one.name = key;
					}

					var op_series_one_data = op_series_one.value;
					if (!op_series_one_data) {
						op_series_one_data = [];
						op_series_one.value = op_series_one_data;
					}
					op_series_one_data.push(value);
				}
				j++;
			}
		}

		var op_series = [{
			type: 'radar',
			data: op_series_datas
		}];

		//图例
		var legend = vm.legend;

		//图例数据
		legend.data = op_legend_data; //['预算分配','实际开销'],

		var radar = vm.radar || {};
		radar.indicator = op_radar_indicator;

		var option = {
			title: vm.title,
			tooltip: {
				confine: true,
				formatter: function (data) {
			    	var relVal = data.name;  
			           for (var i = 0; i < data.value.length; i++) {  
			                relVal += '<br/>' +   radar.indicator[i].name + ' : ' +  require("mec").formatNumber(data.value[i], p.labelFormat);  
			            }  
			           return relVal;  
		
		    	}
			},
			legend: legend,
			radar: radar,
			series: op_series,
			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 = vm.color;

		if (color) {
			option.color = color.split(",");
		}

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

	if (p.isdefault) {
		var datas = [
			{ name: "家电类", "销售额": "4000", max: "6500" },
			{ name: "食品类", "销售额": "12000", max: "16000" },
			{ name: "日常用品类", "销售额": "27000", max: "30000" }
		];

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