lxnd 8 năm trước cách đây
mục cha
commit
cf539cd766

+ 3 - 2
yanshi/package.json

xqd
@@ -3,11 +3,12 @@
   "version": "1.1.1",
   "description": "myApp: An Ionic project",
   "dependencies": {
+    "g2": "^2.2.3",
     "gulp": "^3.5.6",
-    "gulp-sass": "^2.0.4",
     "gulp-concat": "^2.2.0",
     "gulp-minify-css": "^0.3.0",
-    "gulp-rename": "^1.2.0"
+    "gulp-rename": "^1.2.0",
+    "gulp-sass": "^2.0.4"
   },
   "devDependencies": {
     "bower": "^1.3.3",

+ 2 - 1
yanshi/www/index.html

xqd
@@ -26,5 +26,6 @@
 	<script src="js/app.js"></script>
 	<script src="js/controllers.js"></script>
 
-
+	<!--<script src="https://a.alipayobjects.com/g/datavis/g2/2.2.3/g2.js"></script>
+	<script src="js/g2.js"></script>-->
 

+ 24 - 70
yanshi/www/js/controllers.js

xqd xqd xqd xqd xqd xqd xqd xqd xqd
@@ -96,9 +96,8 @@ starter.controller('showCtrl',["$scope",'$ionicHistory','$state','$timeout','$st
 					$scope.item1= req.speed;
 					$scope.data2 = [req.torque,req.v,req.p,req.a,req.efficiency];
 					//五轴图参数
-					$scope.item2 = req.torque;
-					$scope.data3 = [req.speed,req.v,req.p,req.a,req.efficiency];
-					console.log(req)
+					$scope.item2 = req.nj;
+					$scope.data3 = [req.glys,req.ssgl,req.xl,req.zs,req.dl];
 				});
 			}).error(function(){
 				$timeout(function(){
@@ -126,12 +125,15 @@ starter.controller('showCtrl',["$scope",'$ionicHistory','$state','$timeout','$st
 		}).success(function(req){
 			$timeout(function() {
 		        $ionicLoading.hide();
+		        //主页参数
+		     	console.log(req.t2);
 		        //tn曲线图参数
 				$scope.item1= req.speed;
 				$scope.data2 = [req.torque,req.v,req.p,req.a,req.efficiency];
 				//五轴图参数
-				$scope.item2 = req.torque;
-				$scope.data3 = [req.speed,req.v,req.p,req.a,req.efficiency];
+				$scope.item2 = req.nj;
+				$scope.data3 = [req.glys,req.ssgl,req.xl,req.zs,req.dl];
+				
 			});
 		}).error(function(){
 			$timeout(function(){
@@ -166,7 +168,7 @@ starter.controller('showCtrl',["$scope",'$ionicHistory','$state','$timeout','$st
 	};
 	//TN曲线图
 	$scope.legend1 = ["扭矩", "电压",'输入功率','电流','效率'];  
-	$scope.legend2 = ["转速", "电压",'输入功率','电流','效率'];  
+	$scope.legend2 = ["功率因素", "输入功率",'效率','转速','电流'];  
     $scope.num = [0,1,2,3,4];
 
 }])
@@ -399,11 +401,11 @@ starter.directive('line', function() {
                 yAxis: [
 		        {
 		            type: 'value',
-//		            name: '转速',
-		            min: 600,
-		            max: 2000,
+//		            name: '功率因素',
+		            min: 0.27,
+		            max: 0.7,
 		            position: 'left',
-		            offset:205,
+		            offset:225,
 		            axisLine: {
 		                lineStyle: {
 		                    color: colors[0],
@@ -420,10 +422,10 @@ starter.directive('line', function() {
 		        {
 		            type: 'value',
 //		            name: '电\n压\n(V)',
-		            min: 193,
-		            max: 202,
+		            min: 130,
+		            max: 630,
 		            position: 'left',
-		            offset: 150,
+		            offset: 170,
 		            axisLine: {
 		                lineStyle: {
 		                    color: colors[1],
@@ -440,10 +442,10 @@ starter.directive('line', function() {
 		        {
 		            type: 'value',
 //		            name: '输\n入\n功\n率\n(W)',
-		            min: 0,
-		            max: 1300,
+		            min: 64,
+		            max: 77,
 		            position: 'left',
-		            offset:90,
+		            offset:125,
 		            axisLine: {
 		                lineStyle: {
 		                    color: colors[2],
@@ -459,10 +461,10 @@ starter.directive('line', function() {
 		        {
 		            type: 'value',
 //		            name: '电\n流\n(A)',
-		            min: 1,
-		            max: 6,
+		            min: 2600,
+		            max: 2940,
 		            position: 'left',
-		            offset:45,
+		            offset:50,
 		            axisLine: {
 		                lineStyle: {
 		                    color: colors[3],
@@ -479,8 +481,8 @@ starter.directive('line', function() {
 		        {
 		            type: 'value',
 //		            name: '效\n率\n(%)',
-		            min: 10,
-		            max: 80,
+		            min: 1.3,
+		            max: 2.3,
 		            position: 'left',
 		            offset:0,
 		            axisLine: {
@@ -518,53 +520,5 @@ starter.directive('line', function() {
         }  
     };  
 })
-//starter.directive('c1',function(){
-//	 return {  
-//          restrict:'E',
-//          template: '<div style="height:700px;"></div>',  
-//      	replace: true, 
-//      }
-//	 var Stat = G2.Stat;
-//    var data = [];
-//    for(var i = 0; i <= 20; i ++) {
-//      for(var j = 0; j <= 20; j ++) {
-//        var x = i*25.6;
-//        var y = j*19.2;
-//        var z = 700-(x+0.5*y)+Math.random()*(400); 
-//        data.push({
-//          l: x,
-//          g: y,
-//          Altitude: z
-//        });
-//      }
-//    }
-//    var chart = new G2.Chart({
-//      id: 'c1',
-//      forceFit: true,
-//      height: 450
-//    });
-//    //为了将数据与图片上的位置完全吻合,我们需要将横轴和纵轴的范围设定为数据对应范围,并将范围优化处理关闭
-//    var defs = {
-//      'l': {
-//        type: 'linear',
-//        min: 0,
-//        max: 512,
-//        nice: false//优化处理关闭
-//      },
-//      'g': {
-//        type: 'linear',
-//        min: 0,
-//        max: 384,
-//        nice: false
-//      },
-//      'Altitude': {
-//        tickCount:200
-//      }
-//    };
-//
-//    chart.source(data,defs);
-//    chart.contour().position(Stat.smooth.loess.triangular('l*g*Altitude',0.01)).color('Altitude','hue').size(3);
-//    chart.render();
-//  
-//})
+
 

+ 26 - 0
yanshi/www/js/g2.js

xqd
@@ -0,0 +1,26 @@
+var data = [
+  {genre: 'Sports', sold: 275},
+  {genre: 'Strategy', sold: 115},
+  {genre: 'Action', sold: 120},
+  {genre: 'Shooter', sold: 350},
+  {genre: 'Other', sold: 150},
+]; // G2 对数据源格式的要求,仅仅是 JSON 数组,数组的每个元素是一个标准 JSON 对象。
+// Step 1: 创建 Chart 对象
+var chart = new G2.Chart({
+  id: 'c1', // 指定图表容器 ID
+  width : 600, // 指定图表宽度
+  height : 300 // 指定图表高度
+});
+// Step 2: 载入数据源
+chart.source(data, {
+  genre: {
+    alias: '游戏种类' // 列定义,定义该属性显示的别名
+  },
+  sold: {
+    alias: '销售量'
+  }
+});
+// Step 3:创建图形语法,绘制柱状图,由 genre 和 sold 两个属性决定图形位置,genre 映射至 x 轴,sold 映射至 y 轴
+chart.interval().position('genre*sold').color('genre')
+// Step 4: 渲染图表
+chart.render();

+ 28 - 8
yanshi/www/templates/show.html

xqd
@@ -53,21 +53,41 @@
 				<td colspan="5">驱动器设备</td>
 			</tr>
 			<tr>
-				<td style="font-weight: bold;">{{name1}}</td>
-				<td>{{value1}}</td>
+				<td style="font-weight: bold;"></td>
+				<td></td>
+				<td></td>
+				<td style="font-weight: bold;"></td>
+				<td></td>
+			</tr>
+			<tr class="line">
+				<td colspan="5">电机设备</td>
+			</tr>
+			<tr>
+				<td style="font-weight: bold;"></td>
+				<td></td>
+				<td></td>
+				<td style="font-weight: bold;"></td>
+				<td></td>
+			</tr>
+			<tr class="line">
+				<td colspan="5">驱动器设备</td>
+			</tr>
+			<tr>
+				<td style="font-weight: bold;"></td>
+				<td></td>
+				<td></td>
+				<td style="font-weight: bold;"></td>
 				<td></td>
-				<td style="font-weight: bold;">{{name2}}</td>
-				<td>{{value2}}</td>
 			</tr>
 			<tr class="line">
 				<td colspan="5">电机设备</td>
 			</tr>
 			<tr>
-				<td style="font-weight: bold;">{{name3}}</td>
-				<td>{{value3}}</td>
+				<td style="font-weight: bold;"></td>
+				<td></td>
+				<td></td>
+				<td style="font-weight: bold;"></td>
 				<td></td>
-				<td style="font-weight: bold;">{{name4}}</td>
-				<td>{{title4}}</td>
 			</tr>
 		</table>
 	</script>