demo.html 2.29 KB
<div id="chart" class="page out" data-title="图表插件">
	<div id="chart-header"></div>
	<div id="chart-a"></div>
	<div id="chart-b"></div>
</div>
<script>
require(["NavHeader", "Chart"], function(NavHeader, Chart) {
	var _u = require("mUtil");
	var hasClsPicker = typeof clsPicker !== "undefined";

	if(!hasClsPicker) {
		new NavHeader({
			el: "chart-header",
			option: {
				title:"图表插件", 
				smallTitle:"chart"
			}
		}).render();
	}
	
	new Chart({
		el: "chart-a",
		option : {
			data : [
			 	{"name":"1月", "value":"30.0", "color":"#c23531", "background_color":"#c23531"},
			 	{"name":"2月", "value":"26.0", "color":"#2f4554", "background_color":"#2f4554"},
			 	{"name":"3月", "value":"42.0", "color":"#61a0a8", "background_color":"#61a0a8"},
			 	{"name":"4月", "value":"55.0", "color":"#d48265", "background_color":"#d48265"},
			 	{"name":"5月", "value":"12.0", "color":"#91c7ae", "background_color":"#91c7ae"},
			 	{"name":"6月", "value":"33.0", "color":"#749f83", "background_color":"#749f83"}
			],
			/*
			Column2D 2D柱状图, Column3D 3D柱状图, Pie2D 2D饼状图
			Pie3D 3D饼状图, Donut2D 2D环形图, Line2D 2D折线图, Area2D 2D面积图
			*/
			chartType : "Column2D",
			height : 300,
			linecolor : "blue",
			title : {
				name : "月收支图(柱状图)",
				color : "black",
				font : "Verdana",
				fontsize : 14,
				fontweight : "normal"
			},
			valuesuffix : "万"
		}
	}).render().then(function() {
		if (!hasClsPicker) return;
		
		_u.vetically("#chart-a");

		clsPicker.golalSetting({
			container: ".wev-comp-Chart",
			type: "Chart"
		});

		new clsPicker({
			selector: ".wev-chart-container",
			text: ".wev-chart-container",
			lineYSkew: 40,
			skew: [5, 7],
			position: "top right"
		});
	});
	
	if(!hasClsPicker) {
		new Chart({
			el: "chart-b",
			option : {
				data : "/mobilemode/mobile/demo/plugin/Chart/data.json",
				/*
				Column2D 2D柱状图, Column3D 3D柱状图, Pie2D 2D饼状图
				Pie3D 3D饼状图, Donut2D 2D环形图, Line2D 2D折线图, Area2D 2D面积图
				*/
				chartType : "Area2D",
				height : 300,
				linecolor : "blue",
				title : {
					name : "月收支图(面积图)",
					color : "black",
					font : "Verdana",
					fontsize : 14,
					fontweight : "normal"
				},
				valuesuffix : "万"
			}
		}).render();
	}
});
</script>