pages/target_water_fertilizer_PH/target_water_fertilizer_PH.vue

@@ -22,7 +22,7 @@
 					<text>{{ titleName+echartName }}</text>
 				</view>
 				<view id="echart_p">
-					<qiun-data-charts type="area" :opts="opts" :chartData="chartData" :ontouch="true"
+					<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true"
 						background="none" />
 				</view>
 			</view>
@@ -38,29 +38,26 @@
 				background: {
 					backgroundColor: 'transparent',
 				},
-
-				equipmentId: '',
+				
+				equipmentId:'',
 
 				chartData: {},
 				opts: {
 					color: ["#24B383"],
-					padding: [15, 35, 0, 15],
+					padding: [15, 10, 0, 15],
 					dataLabel: false,
 					dataPointShape: false,
-					enableScroll: false,
+					enableScroll: true,
 					legend: {},
-					tooltipShow: true,
 					xAxis: {
 						disableGrid: true,
-						// scrollShow: true,
-						labelCount: 4,
-						// scrollAlign: 'left',
-						// scrollColor: '#24B383',
-						// scrollBackgroundColor: '#DFE5E4',
-						// itemCount: '5',
+						scrollShow: true,
+						scrollAlign: 'left',
+						scrollColor: '#24B383',
+						scrollBackgroundColor: '#DFE5E4',
+						itemCount: 3,
 						boundaryGap: "justify",
-						// format: "",
-
+						format: "",
 					},
 					yAxis: {
 						gridType: "dash",
@@ -69,14 +66,14 @@
 						data: [{
 							title: '',
 							min: 0,
-							// max: '',
+							// max: 14
 							titleOffsetY: -5,
 						}]
 					},
 					extra: {
 						area: {
 							type: "curve",
-							opacity: 0.8,
+							opacity: 0.2,
 							addLine: true,
 							width: 2,
 							gradient: true,
@@ -84,96 +81,90 @@
 						}
 					}
 				},
-
-				categoriesList: [],
-				valuePH: '',
-				valuePHList: [],
-				newValuePHList: [],
-				unit: '',
-
-				titleName: '',
-				echartName: ''
+				
+				categoriesList:[],
+				valuePH:'',
+				valuePHList:[],
+				newValuePHList:[],
+				unit:'',
+				
+				titleName:'',
+				echartName:''
 			};
 		},
 		onReady() {
 			// this.getEchartsData()
 			// this.getServerData();
-
+			
 		},
 		onLoad(option) {
-			// console.log(option);
-			if (option.id) {
+			console.log(option);
+			if(option.id){
 				this.equipmentId = option.id
 			}
-			if (option.data) {
+			if(option.data){
 				this.valuePH = option.data
 			}
-			if (option.name) {
+			if(option.name){
 				this.echartName = option.name
 			}
-			if (option.unit) {
+			if(option.unit){
 				this.unit = option.unit
 				this.opts.yAxis.data[0].title = option.unit
 			}
-
-			this.titleName = this.getStatus(option.equipmentNumber, option.targetValue)
+			
+			this.titleName = this.getStatus(option.equipmentNumber,option.targetValue)
 		},
 		mounted() {
-			this.getEchartsData()
+			  this.getEchartsData()
 		},
 		methods: {
 			getServerData() {
-
+				
 				//模拟从服务器获取数据时的延时
 				setTimeout(() => {
 					//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
 					let res = {
-						categories: this.categoriesList,
+						categories:  this.categoriesList,
 						series: [{
-							name: this.titleName + this.echartName,
+							name: this.titleName+this.echartName,
 							data: this.newValuePHList
 						}, ]
 					};
 					this.chartData = JSON.parse(JSON.stringify(res));
 				}, 500);
 			},
-
+			
 			// 获取折线图数据
-			getEchartsData() {
+			getEchartsData(){
 				this.$http({
-					url: this.api.chart_fsdata + '?equipmentId=' + this.equipmentId,
-					method: 'POST'
-				}).then(res => {
-					console.log(res, '获取折线图数据');
-					res.data.forEach((i, index) => {
+					url:this.api.chart_fsdata + '?equipmentId=' + this.equipmentId,
+					method:'POST'
+				}).then(res=>{
+					console.log(res,'获取折线图数据');
+					res.data.forEach((i,index)=>{
 						this.categoriesList.push(i.time);
 						this.valuePHList.push(i.value)
 					})
-					this.getServerData();
-
-					this.categoriesList = this.categoriesList.map(item => {
-						return item.split(' ')[1]
-					})
-					// this.opts.xAxis.itemCount = this.categoriesList.length
+					 this.getServerData();
 					// console.log(this.categoriesList,'this.categoriesList');
 					// console.log(this.valuePHList,'this.valuePHList');
-					this.newValuePHList = this.valuePHList.map((e, index) => {
-						return e[this.titleName + this.echartName] == undefined ? '' : e[this.titleName +
-							this.echartName]
+					this.newValuePHList = this.valuePHList.map((e,index)=>{
+						return e[this.titleName+this.echartName] == undefined ? '' : e[this.titleName+this.echartName]
 					})
-					console.log(this.newValuePHList, '121212212121211111111');
+					console.log(this.newValuePHList,'121212212121211111111');
 				})
 			},
-
+			
 			// 判断是否是平均或者目标,或者是1#
-			getStatus(equipmentNumber, targetValue) {
-				if (targetValue == 1) {
+			getStatus(equipmentNumber,targetValue){
+				if(targetValue == 1){
 					return '目标'
-				} else if (targetValue == 0 && equipmentNumber == 0) {
+				}else if(targetValue == 0 && equipmentNumber == 0){
 					return '1#平均'
-				} else if (targetValue == 0 && equipmentNumber == 15) {
+				}else if(targetValue == 0 && equipmentNumber == 15){
 					return '2#平均'
-				} else if (targetValue == 0 && equipmentNumber != 0 && equipmentNumber != 15) {
+				}else if(targetValue == 0 && equipmentNumber != 0 && equipmentNumber != 15){
 					return equipmentNumber + '#'
 				}
 			}
@@ -275,7 +266,7 @@
 					width: 100%;
 					height: calc(100% - 74rpx);
 					box-sizing: border-box;
-					padding: 0 0rpx;
+					padding: 0 20rpx;
 				}
 			}
 		}

unpackage/dist/dev/mp-weixin/pages/target_water_fertilizer_PH/target_water_fertilizer_PH.js

@@ -210,24 +210,21 @@ var _default = {
       chartData: {},
       opts: {
         color: ["#24B383"],
-        padding: [15, 35, 0, 15],
+        padding: [15, 10, 0, 15],
         dataLabel: false,
         dataPointShape: false,
-        enableScroll: false,
+        enableScroll: true,
         legend: {},
-        tooltipShow: true,
         xAxis: {
           disableGrid: true,
-          // scrollShow: true,
-          labelCount: 4,
-          // scrollAlign: 'left',
-          // scrollColor: '#24B383',
-          // scrollBackgroundColor: '#DFE5E4',
-          // itemCount: '5',
-          boundaryGap: "justify"
-          // format: "",
+          scrollShow: true,
+          scrollAlign: 'left',
+          scrollColor: '#24B383',
+          scrollBackgroundColor: '#DFE5E4',
+          itemCount: 3,
+          boundaryGap: "justify",
+          format: ""
         },
-
         yAxis: {
           gridType: "dash",
           dashLength: 2,
@@ -235,14 +232,14 @@ var _default = {
           data: [{
             title: '',
             min: 0,
-            // max: '',
+            // max: 14
             titleOffsetY: -5
           }]
         },
         extra: {
           area: {
             type: "curve",
-            opacity: 0.8,
+            opacity: 0.2,
             addLine: true,
             width: 2,
             gradient: true,
@@ -264,7 +261,7 @@ var _default = {
     // this.getServerData();
   },
   onLoad: function onLoad(option) {
-    // console.log(option);
+    console.log(option);
     if (option.id) {
       this.equipmentId = option.id;
     }
@@ -312,10 +309,6 @@ var _default = {
           _this2.valuePHList.push(i.value);
         });
         _this2.getServerData();
-        _this2.categoriesList = _this2.categoriesList.map(function (item) {
-          return item.split(' ')[1];
-        });
-        // this.opts.xAxis.itemCount = this.categoriesList.length
         // console.log(this.categoriesList,'this.categoriesList');
         // console.log(this.valuePHList,'this.valuePHList');
         _this2.newValuePHList = _this2.valuePHList.map(function (e, index) {

unpackage/dist/dev/mp-weixin/pages/target_water_fertilizer_PH/target_water_fertilizer_PH.wxml

@@ -1 +1 @@
-<view class="target_water_fertilizer_PH data-v-3d983434"><u-navbar vue-id="454957e0-1" background="{{background}}" is-back="{{true}}" back-icon-color="#FFFFFF" border-bottom="{{false}}" title="{{titleName+echartName}}" title-color="#FFFFFF" title-bold="{{true}}" title-size="32" class="data-v-3d983434" bind:__l="__l"></u-navbar><view class="navbar data-v-3d983434"><image src="../../static/PH_bg.png" mode class="data-v-3d983434"></image></view><view class="content data-v-3d983434"><view class="number data-v-3d983434">{{''+(valuePH+unit)+''}}</view><view class="data_analysis data-v-3d983434"><image src="../../static/data_analysis.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">数据分析</text></view><view class="echart data-v-3d983434"><view class="title data-v-3d983434"><image src="../../static/icon_ph.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">{{titleName+echartName}}</text></view><view id="echart_p" class="data-v-3d983434"><qiun-data-charts vue-id="454957e0-2" type="area" opts="{{opts}}" chartData="{{chartData}}" ontouch="{{true}}" background="none" class="data-v-3d983434" bind:__l="__l"></qiun-data-charts></view></view></view></view>
+<view class="target_water_fertilizer_PH data-v-3d983434"><u-navbar vue-id="454957e0-1" background="{{background}}" is-back="{{true}}" back-icon-color="#FFFFFF" border-bottom="{{false}}" title="{{titleName+echartName}}" title-color="#FFFFFF" title-bold="{{true}}" title-size="32" class="data-v-3d983434" bind:__l="__l"></u-navbar><view class="navbar data-v-3d983434"><image src="../../static/PH_bg.png" mode class="data-v-3d983434"></image></view><view class="content data-v-3d983434"><view class="number data-v-3d983434">{{''+(valuePH+unit)+''}}</view><view class="data_analysis data-v-3d983434"><image src="../../static/data_analysis.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">数据分析</text></view><view class="echart data-v-3d983434"><view class="title data-v-3d983434"><image src="../../static/icon_ph.png" mode class="data-v-3d983434"></image><text class="data-v-3d983434">{{titleName+echartName}}</text></view><view id="echart_p" class="data-v-3d983434"><qiun-data-charts vue-id="454957e0-2" type="line" opts="{{opts}}" chartData="{{chartData}}" ontouch="{{true}}" background="none" class="data-v-3d983434" bind:__l="__l"></qiun-data-charts></view></view></view></view>

unpackage/dist/dev/mp-weixin/pages/target_water_fertilizer_PH/target_water_fertilizer_PH.wxss

@@ -108,6 +108,6 @@
   width: 100%;
   height: calc(100% - 74rpx);
   box-sizing: border-box;
-  padding: 0 0rpx;
+  padding: 0 20rpx;
 }