tn曲线

yanshi/www/index.html

@@ -25,7 +25,7 @@
 
     <!-- ionic/angularjs js -->
     <script src="lib/ionic/js/ionic.bundle.js"></script>
-
+		<script src="js/echarts.min.js"></script>
     <!-- cordova script (this will be a 404 during development) -->
     <script src="cordova.js"></script>
 

yanshi/www/js/controllers.js

@@ -1,6 +1,6 @@
-angular.module('starter.controllers', [])
+var starter = angular.module('starter.controllers', [])
 
-.controller('loginCtrl',["$scope",'$state','$ionicLoading','$timeout','$ionicPopup',function($scope,$state,$ionicLoading,$timeout,$ionicPopup){
+starter.controller('loginCtrl',["$scope",'$state','$ionicLoading','$timeout','$ionicPopup',function($scope,$state,$ionicLoading,$timeout,$ionicPopup){
 	$scope.vm = {
 		mobile:'',
 		password:''
@@ -36,7 +36,7 @@ angular.module('starter.controllers', [])
 	
 }])
 
-.controller('homeCtrl',["$scope",'$http','$timeout',function($scope,$http,$timeout){
+starter.controller('homeCtrl',["$scope",'$http','$timeout',function($scope,$http,$timeout){
 	$scope.excals = [
 		{'list':'测试一'},
 		{'list':'测试二'},
@@ -53,28 +53,175 @@ angular.module('starter.controllers', [])
 	}
 }])
 //展示首页控制器
-.controller('lineCtrl',["$scope",'$ionicHistory','$state',function($scope,$ionicHistory,$state){
+starter.controller('lineCtrl',["$scope",'$ionicHistory','$state',function($scope,$ionicHistory,$state){
 	$scope.go = function(target){
 		$ionicHistory.clearHistory();
 		$state.go(target)
 	}
 }])
 //TN曲线控制器
-.controller('tnCtrl',["$scope",'$ionicHistory','$state',function($scope,$ionicHistory,$state){
+starter.controller('tnCtrl',["$scope",'$ionicHistory','$state',function($scope,$ionicHistory,$state){
 	$scope.go = function(target){
 		$ionicHistory.clearHistory();
 		$state.go(target)
 	}
-}])
+	$scope.legend = ["扭矩", "电压",'输入功率','电流','效率'];  
+    $scope.item = ['200rpm','400rpm','600rpm','800rpm','1000rpm','1200rpm','1400rpm','1600rpm','1800rpm','2000rpm','2200rpm','2400rpm']; 
+    $scope.num = [0,1,2,3,4];
+    $scope.data = [  
+        [0.2,0.8,1.6,2.7,1.3,3.0,2.5,1.1,3.1,0.5,1.4,2.8,1.1], //扭矩  
+        [0, 1, 4, 7, 12, 15, 16, 15, 15, 10, 6, 5], //电压 
+        [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],    //输入功率  
+        [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],   //电流
+        [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3]//效率
+    ];  
+}]);  
+  
+  
+starter.directive('line', function() {  
+    return {  
+        scope: {  
+            id: "@",  
+            legend: "=",  
+            item: "=",
+            num:"=",
+            data: "="  
+        },  
+        restrict: 'E',  
+        template: '<div style="height:400px;"></div>',  
+        replace: true,  
+        link: function($scope, element, attrs, controller) { 
+        	var colors = ['#a62ca6', '#8e0515', '#45baf3','#ff2420','#1a9a1a'];
+            var option = {  
+            	color:colors,
+                // 提示框，鼠标悬浮交互时的信息提示  
+                tooltip: {  
+                    show: true,  
+                    trigger: 'axis'  
+                },  
+                grid:{
+                	left:'30%'
+                },
+                // 图例  
+                legend: {  
+                    data: $scope.legend  
+                }, 
+//              toolbox: {
+//			        feature: {
+//			            dataView: {show: true, readOnly: false},
+//			            restore: {show: true},
+//			            saveAsImage: {show: true}
+//			        }
+//			    },
+                // 横轴坐标轴  
+                xAxis: [
+			        {
+			            type: 'category',
+			            axisTick: {
+			                alignWithLabel: true
+			            },
+			            data: $scope.item
+			        }
+			    ], 
+                // 纵轴坐标轴  
+                yAxis: [
+		        {
+		            type: 'value',
+		            name: '扭矩',
+		            min: 0,
+		            max: 3,
+		            position: 'left',
+		            offset:90,
+		            axisLine: {
+		                lineStyle: {
+		                    color: colors[0]
+		                }
+		            },
+		        },
+		        {
+		            type: 'value',
+		            name: '电压',
+		            min: 0,
+		            max: 220,
+		            position: 'left',
+		            offset: 60,
+		            axisLine: {
+		                lineStyle: {
+		                    color: colors[1]
+		                }
+		            },
+		        },
+		        {
+		            type: 'value',
+		            name: '输入功率',
+		            min: 0,
+		            max: 1500,
+		            position: 'left',
+		            offset:23,
+		            axisLine: {
+		                lineStyle: {
+		                    color: colors[2]
+		                }
+		            },
+		        },
+		        {
+		            type: 'value',
+		            name: '电流',
+		            min: 0,
+		            max: 6,
+		            position: 'left',
+		            offset:5,
+		            axisLine: {
+		                lineStyle: {
+		                    color: colors[3]
+		                }
+		            },
+		       
+		        },
+		        {
+		            type: 'value',
+		            name: '效率',
+		            min: 0,
+		            max: 80,
+		            position: 'left',
+		            offset:-20,
+		            axisLine: {
+		                lineStyle: {
+		                    color: colors[4]
+		                }
+		            },
+		        }
+		    ], 
+                // 数据内容数组  
+                series: function(){  
+                    var serie=[];  
+                    for(var i=0;i<$scope.legend.length;i++){  
+                        var item = {  
+                            name : $scope.legend[i],  
+                            type: 'line',
+                            yAxisIndex:$scope.num[i],
+                            data: $scope.data[i]  
+                        };  
+                        serie.push(item);  
+                    }  
+                    return serie;  
+                }()  
+				
+            };  
+            var myChart = echarts.init(document.getElementById($scope.id),'macarons');  
+            myChart.setOption(option);  
+        }  
+    };  
+})
 //五轴图控制器
-.controller('zhouCtrl',["$scope",'$ionicHistory','$state',function($scope,$ionicHistory,$state){
+starter.controller('zhouCtrl',["$scope",'$ionicHistory','$state',function($scope,$ionicHistory,$state){
 	$scope.go = function(target){
 		$ionicHistory.clearHistory();
 		$state.go(target)
 	}
 }])
 //效率云图控制器
-.controller('stromCtrl',["$scope",'$ionicHistory','$state',function($scope,$ionicHistory,$state){
+starter.controller('stromCtrl',["$scope",'$ionicHistory','$state',function($scope,$ionicHistory,$state){
 	$scope.go = function(target){
 		$ionicHistory.clearHistory();
 		$state.go(target)

yanshi/www/templates/show/strom.html

@@ -3,8 +3,8 @@
 	    <a class="button icon-left ion-chevron-left button-clear button-dark" ng-click=go('home')>返回</a>
 	</ion-header-bar>
 	<ion-content>
-	<div class="bar bar-calm" style="line-height: 44px;">
-		<span style="margin: 0 auto;">效率云图</span>
+	<div  style="line-height: 44px;width: 100%;background-color: #11C1F3;text-align: center;font-size: 20px;color: white;">
+		效率云图
 	</div>
 	  
 	</ion-content>

yanshi/www/templates/show/tn.html

@@ -3,9 +3,10 @@
 	    <a class="button icon-left ion-chevron-left button-clear button-dark" ng-click=go('home')>返回</a>
 	</ion-header-bar>
 	<ion-content>
-	<div class="bar bar-calm" style="line-height: 44px;">
-		<span style="margin: 0 auto;">TN曲线</span>
+	<div  style="line-height: 44px;width: 100%;background-color: #11C1F3;text-align: center;font-size: 20px;color: white;">
+		TN曲线
 	</div>
+	<line id="main" legend="legend" item="item" data="data" num="num"></line> 
 	</ion-content>
 	<div class="tabs">
 	  <a class="tab-item" href="#/line">

yanshi/www/templates/show/zhou.html

@@ -3,8 +3,8 @@
 	    <a class="button icon-left ion-chevron-left button-clear button-dark" ng-click=go('home')>返回</a>
 	</ion-header-bar>
 	<ion-content>
-	<div class="bar bar-calm" style="line-height: 44px;">
-		<span style="margin: 0 auto;">五轴图</span>
+	<div  style="line-height: 44px;width: 100%;background-color: #11C1F3;text-align: center;font-size: 20px;color: white;">
+		五轴图
 	</div>
 	</ion-content>
 	<div class="tabs">