<div id="linechart" class="page out" data-title="折线图插件">
	<div id="linechart-header"></div>
	<div id="linechart-a"></div>
    <div id="linechart-b"></div>
</div>
<script>
require(["NavHeader", "LineChart"], function(NavHeader, LineChart) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";
	if(!hasClsPicker) {
		new NavHeader({
			el: "linechart-header",
			option: {
				title:"折线图插件", 
				smallTitle:"linechart"
			}
		}).render();
	}	
	new LineChart({
		el: "linechart-a",
		option: {
			data : [	
			 	{"week":"周一","最高温度":"11","最低温度":"1"},
			 	{"week":"周二","最高温度":"7","最低温度":"6"},
			 	{"week":"周三","最高温度":"15","最低温度":"2"},
			 	{"week":"周四","最高温度":"13","最低温度":"5"},
			 	{"week":"周五","最高温度":"12","最低温度":"3"},
			 	{"week":"周六","最高温度":"13","最低温度":"2"},
			 	{"week":"周日","最高温度":"10","最低温度":"4"}
			],//图表数据
			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//坐标标签字体大小
				}
			},
			isShowMarkLine : true,//在图表上显示一根平均值的标线
			isShowLabel : true,//在折线点上显示具体的数值
			isShowArea : 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?ajax=true&name="+params.name+"&seriesname="+params.seriesName+"&value="+params.value;
				$u(url);
			}
		}
	}).render().then(function(){
		if (!hasClsPicker) return;
		_u.vetically("#linechart-a");
		clsPicker.golalSetting({
			container: "#linechart-a",
			type: "Linechart"
		});
		new clsPicker({
			selector: ".wev-chart-container",
			text: ".wev-chart-container",
			skew: [10, 9],
			lineYSkew: 30,
			position: "bottom right"
		});
	});
});
</script>