<div id="barchart" class="page out" data-title="柱状图插件">
	<div id="barchart-header"></div>
	<div id="barchart-a"></div>
    <div id="barchart-b"></div>
</div>
<script>
require(["NavHeader", "BarChart"], function(NavHeader, BarChart) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if(!hasClsPicker) {
		new NavHeader({
			el: "barchart-header",
			option: {
				title:"柱状图插件", 
				smallTitle:"barchart"
			}
		}).render();
	}

	new BarChart({
		el: "barchart-a",
		option: {
			dataAxis: "yAxis",//xAxis 横向 yAxis 纵向
			data: [
				{ "name": "1月", "蒸发量": "2.0", "降水量": "2.6" },
				{ "name": "2月", "蒸发量": "4.9", "降水量": "5.9" },
				{ "name": "3月", "蒸发量": "7.0", "降水量": "9.0" },
				{ "name": "4月", "蒸发量": "23.2", "降水量": "25.6" },
				{ "name": "5月", "蒸发量": "25.0", "降水量": "28.7" },
				{ "name": "6月", "蒸发量": "2.0", "降水量": "2.6" }
			],//图表数据
			height: 400,//图表高度
			title: {
				show: true,
				text: "某地区蒸发量和降水量",//标题
				subtext: "纯属虚构"//副标题
			},
			grid: {
				top: 80,//上边距
				bottom: 60,//底部边距
				left: "10%"//左边距
			},
			legend: {
				show: true,//是否显示图例
				bottom: 10,//图例底部边距
				textStyle: {
					color: "#333"//字体颜色
				}
			},
			axisLabel: {
				interval: 0,//坐标标签间隔，0表示显示所有坐标
				rotate: 0,//坐标标签旋转角度
				textStyle: {
					fontSize: 12//坐标标签字体大小
				}
			},
			isShowMarkPoint: true,//在最大和最小柱状上显示具体的数值
			isShowMarkLine: true,//在图表上显示一根平均值的标线
			color: "#c23531,#2f4554,#61a0a8,#d48265,#91c7ae,#749f83,#ca8622,#bda29a,#6e7074,#546570,#c4ccd3",//颜色，默认
			click: function (params) {
				var url = "/mobilemode/mobile/demo/plugin/NewChart/detail.html?name=" + params.name + "&seriesname=" + params.seriesName + "&value=" + params.value;
				$u({ url: url, ajax: true });
			}
		}
	}).render().then(function() {
		if (!hasClsPicker) return;
		
		_u.vetically("#barchart-a");

		clsPicker.golalSetting({
			container: ".wev-comp-BarChart",
			type: "BarChart"
		});
		new clsPicker({
			selector: ".wev-chart-container",
			text: ".wev-chart-container",
			lineYSkew: 40,
			skew: [5, 9],
			position: "top right"
		});
	});

	if(!hasClsPicker) {
		new BarChart({
			el: "barchart-b",
			option: {
				dataAxis: "xAxis",//xAxis 横向 yAxis 纵向
				data: "/mobilemode/mobile/demo/plugin/BarChart/data.json",//图表数据来源
				height: 600,//图表高度
				title: {
					show: true,
					text: "世界人口总量",//标题
					subtext: "数据来自网络"//副标题
				},
				grid: {
					top: 60,//上边距
					bottom: 60,//底部边距
					left: "3%",//左边距
					containLabel: true
				},
				legend: {
					show: true,//是否显示图例
					bottom: 10,//图例底部边距
					textStyle: {
						color: "#333"//字体颜色
					}
				},
				axisLabel: {
					interval: 0,//坐标标签间隔，0表示显示所有坐标
					rotate: 0,//坐标标签旋转角度
					textStyle: {
						fontSize: 12//坐标标签字体大小
					}
				},
				isShowMarkPoint: false,//在最大和最小柱状上显示具体的数值
				isShowMarkLine: false,//在图表上显示一根平均值的标线
				color: "#c23531,#2f4554,#61a0a8,#d48265,#91c7ae,#749f83,#ca8622,#bda29a,#6e7074,#546570,#c4ccd3",//颜色，默认
				click: function (params) {
					var url = "/mobilemode/mobile/demo/plugin/NewChart/detail.html?ajax=true&name=" + params.name + "&seriesname=" + params.seriesName + "&value=" + params.value;
					$u(url);
				}
			}
		}).render();
	}
});
</script>