PieChart_wev8.js 5.88 KB
define(['mUtil', "Component", "wev-loading","chartHelper"], function (mUtil, Component, WevLoading ,chartHelper) {
	var PieChart = function (options) {
		var _pieChart = {}, $errorTip, $chartContainer;

		Component.super(this, options);

		this.type = "PieChart";
		this.tpl = this.type + "_html";
		this.css = "chart_css";
		
		this.components = {
			loading: new WevLoading({
				delay: 300,
				animation: 1
			}),
		};

		var vm = this.viewModel = {
			chartType: "pie",//pie 饼状图 donut 环形图
			data: [],
			height: 250,//图表高度
			title: {
				show: false,
				text: "",//标题
				subtext: "",//副标题
				x: 'center',
				y: 0
			},
			legend: {
				show: true,//是否显示图例
				bottom: 5//图例底部边距
			},
			label: {
				show: true,
				position: "outside",//标签位置  inside图表里部  outside图表外部
				textStyle: {
					fontSize: 12 //标签字体大小
				}
			},
			labelLine: {
				show: true,//是否显示引线
				length: 5,//第一段引线长度
				length2: 5//第二点引线长度
			},
			radius: 65,//图表直径,取值0-100,控制饼图大小
			labelFormat:"",
			advancedSearch: {},
			color: "#c23531,#2f4554,#61a0a8,#d48265,#91c7ae,#749f83,#ca8622,#bda29a,#6e7074,#546570,#c4ccd3",//颜色,默认
			standalone: true
		};

		this.beforeMount = function () {
			var style = mUtil.toPixel(vm.height || 250, "height");;

			if (vm.width) {
				style += mUtil.toPixel(vm.width, "width");;
			}
			vm.style = style;
			
			if(mUtil.isString(vm.click) && vm.click != ""){
				var dataurl = vm.click;
				vm.click = function(params){
					var url = dataurl.replace(/\{_chart_name}/g, params.name).replace(/\{_chart_seriesName}/g, params.seriesName).replace(/\{_chart_value}/g, params.value);
					$u(url);
				};
			}

			vm.title = vm.title.text || '';
		};

		this.mounted = function () {
			$errorTip = this.$el.find(".wev-error");
			$chartContainer = this.$el.find(".wev-chart");
			
			this.refresh();
		};

		this.refresh = function () {
			var loading = this.components.loading;

			loading.setRefs(this.$comp, "wev-refreshing");
			loading.show();

			var _hideLoading = loading.hide.bind(loading);

			if (vm.standalone && mUtil.isArray(vm.data)) {
				_pieChart.buildChart(vm.data, _hideLoading);
			} else {
				_pieChart.loadData(_hideLoading);
			}
		};

		this.cacheSearchLast = function(searchLast){//上一次查询参数map
			vm.searchLast = searchLast;
		};

		_pieChart.loadData = function (callback) {
			var timestamp = new Date().valueOf();    //时间戳
			var that = this,
				actionUrl = vm.data;

			that.timestamp = timestamp;

			if (!vm.standalone) {
				actionUrl = mUtil.getActionUrl(that.type, { action: "getDatas", "mec_id": vm.id }, that.pageid);
			}

			if (!actionUrl) return;

			mUtil.getJSON(actionUrl, {}, function (result) {
				if (timestamp != that.timestamp) {
					return;
				}
				var datas = result.data;

				_pieChart.buildChart(datas, callback);
				$errorTip.html("").hide();
				
				if (!vm.advancedSearch.enable) return;
				vm.toolbox = {
					showTitle: false,
					itemSize: 28,
					right: 20,
					top: 20,
					feature: {
						myTool: {
							show: true,
							icon: 'image:///mobilemode/mobile/images/plugin/filter.png',
							onclick: function () {
								require(["mService"], function (mService) {
									mService.show("customsearch", {
										id: that.id,
										pageid: that.pageid,
										searchLast: vm.searchLast || {},
										conditions: vm.advancedSearch.asFields,
										title: vm.title || ""
									});
								});
							}
						}
					}
				};
			}, function(res){
				that.$el.find(".wev-chart-title").removeClass("wev-chart-title-mb");
				$errorTip.html(res).show();
				$chartContainer.hide();
				mUtil.isFunction(callback) && callback.call(this);
			});
		};

		_pieChart.buildChart = function (datas, callback) {
			var $chart = $(".wev-chart", this.$el);

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

				var op_legend_data = [];
				var op_series_data = datas.map(function (d) {
					var arr = Object.keys(d);
					var name = d[arr[0]];

					op_legend_data.push(name);
					return {
						name: name,
						value: d[arr[1]]
					};
				});

				var op_series_radius;
				var radiusMax = parseInt(vm.radius);

				if (isNaN(radiusMax)) {
					radiusMax = 55;
				}

				if (vm.chartType == "pie") {
					op_series_radius = ["0", radiusMax + "%"];
				} else {
					op_series_radius = [(radiusMax - 15) + "%", radiusMax + "%"];
				}

				//图例
				var legend = vm.legend;
				//图例数据
				legend.data = op_legend_data; //['蒸发量','降水量'],
				legend.bottom = 5;

				var option = {
					tooltip: {
						trigger: 'item',
						formatter: function (datas) {
					    	var res = datas.name+ ':';
					    	var value = datas.value;
							value = chartHelper.formatNumber(value, vm.labelFormat);
							res += value + "(" + datas.percent +"%)";
						    return res;
							},
						confine: true,
						position: function(point,params,dom,rect,size){
							dom.style.transform="translateZ(0)";
						}
					},
					legend: legend,
					series: [{
						type: 'pie',
						radius: op_series_radius,
						label: {
							normal: vm.label
						},
						labelLine: {
							normal: vm.labelLine
						},
						data: op_series_data
					}],
    			    toolbox : vm.toolbox
				};

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

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

				if (mUtil.isFunction(vm.click)) {
					theChart.on('click', function (params) {
						vm.click.call(this, params);
					});
				}

				if (mUtil.isFunction(callback)) {
					callback.call(this);
				}
			});
		};

		_pieChart.loadData = _pieChart.loadData.bind(this);
		_pieChart.buildChart = _pieChart.buildChart.bind(this);
	};

	return Component.init(PieChart);
});