sisMobilePhone/components/bracelet/braceletHistoryCurve.vue

<template>
	<view>
		<!--导航栏-->
		<view @tap="closeFrame">
			<cu-custom bgColor="bg-gradual-sisBlack" :isBack="true">
				<block slot="backText">
					<view style="height: 80rpx;line-height: 80rpx;color: silver;">返回</view>
				</block>
				<block slot="content">
					<view style="color: silver;">手环历史曲线</view>
				</block>
			</cu-custom>
		</view>
		
		
			<!-- 曲线图 -->
		<view class="line">
				<!-- 第一排 -->
				<view class="line_One">
					<!-- 心跳 -->
					<view class="line_One_X">
					<div class="font">心跳频率</div>
					<div class="date">{{dataInformation.XTPLTime}}</div>
					<view class="lineChart" @tap="common.navTo('/components/bracelet/raceletDetails/heartbeatDetails?unit=次/分钟&name=心跳频率&color=#A1B95B&braceletCurve_XTPL_Details='+braceletCurve_XTPL_Details+'&dataInformation='+dataInformation.XTPL)">  
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
						</view>
					</view>
					<div class="digital">{{dataInformation.XTPL}}</div>
					<div class="unit">次/分钟</div>
					</view>
						<!-- 步数 -->
					<view class="line_One_B">	
					<view>
						<div class="font">步数</div>
						<div class="date">{{dataInformation.BSTime}}</div>
						<view class="lineChart" @tap="common.navTo('/components/bracelet/raceletDetails/heartbeatDetails?unit=步&name=步数&color=#DDA9B8&braceletCurve_XTPL_Details='+braceletCurve_BS_Details+'&dataInformation='+dataInformation.BS)">  
							<view class="qiun-charts">
								<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts" @touchstart="touchLineB"></canvas>
							</view>
						</view>
						<div class="digital">{{dataInformation.BS}}</div>
						<div class="unit">步</div>
					</view>
					</view>
						<!-- clear -->
						<view class="clear"></view>
				</view>
				<!-- 第二排 -->
				<view class="line_Two">
					<!-- 收缩血压 -->
					<view class="line_T_S">
						<div class="font">收缩血压</div>
						<div class="date">{{dataInformation.SSXYTime}}</div>
					<view class="lineChart" @tap="common.navTo('/components/bracelet/raceletDetails/heartbeatDetails?unit=BP&name=收缩血压&color=#AF8DD1&braceletCurve_XTPL_Details='+braceletCurve_SSXY_Details+'&dataInformation='+dataInformation.SSXY)">  <!-- @tap="closeFrame" -->
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineC" id="canvasLineC" class="charts" @touchstart="touchLineC"></canvas>
						</view>
					</view>
					<div class="digital">{{dataInformation.SSXY}}</div>
					<div class="unit">BP</div>
					</view>
					<!-- 舒张血压 -->
					<view class="line_T_Z">
						<div class="font">舒张血压</div>
						<div class="date">{{dataInformation.SZXYTime}}</div>
					<view class="lineChart" @tap="common.navTo('/components/bracelet/raceletDetails/heartbeatDetails?unit=BP&name=舒张血压&color=#6593B6&braceletCurve_XTPL_Details='+braceletCurve_SZXY_Details+'&dataInformation='+dataInformation.SZXY)">  <!-- @tap="closeFrame" -->
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineD" id="canvasLineD" class="charts" @touchstart="touchLineD"></canvas>
						</view>
					</view>
					<div class="digital">{{dataInformation.SZXY}}</div>
					<div class="unit">BP</div>
					</view>
					<view class="clear"></view>
				</view>
				<!-- 第三行 -->
				<view class="line_Three">
					<!-- 疲劳度 -->
					<view class="line_T_P">
						<div class="font">疲劳度</div>
						<div class="date">{{dataInformation.PLDTime}}</div>
					<view class="lineChart" @tap="common.navTo('/components/bracelet/raceletDetails/heartbeatDetails?unit=%&name=心跳频率&color=#8EDADD&braceletCurve_XTPL_Details='+braceletCurve_PLD_Details+'&dataInformation='+dataInformation.PLD)"> 
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineE" id="canvasLineE" class="charts" @touchstart="touchLineE"></canvas>
						</view>
					</view>
					<div class="digital">{{dataInformation.PLD}}</div>
					<div class="unit">%</div>
					</view>
					<!-- 血氧浓度 -->
					<view class="line_T_X">
						<div class="font">血氧浓度</div>
						<div class="date">{{dataInformation.XYNDTime}}</div>
					<view class="lineChart" @tap="common.navTo('/components/bracelet/raceletDetails/heartbeatDetails?unit=ml/%&name=血氧浓度&color=#E49066&braceletCurve_XTPL_Details='+braceletCurve_XYND_Details+'&dataInformation='+dataInformation.XYND)"> 
						<view class="qiun-charts">
							<canvas canvas-id="canvasLineF" id="canvasLineF" class="charts" @touchstart="touchLineF"></canvas>
						</view>
					</view>
					<div class="digital">{{dataInformation.XYND}}</div>
					<div class="unit">ml/%</div>
					</view>
				</view>
				
				<!-- 清除浮动 -->
				<view class="clear"></view>
		</view>
			<!-- <view class="line_1">
			<view class="lineChart" @tap="closeFrame">
				<view class="qiun-charts">
					<view class="speedPowerDiagram">疲劳度</view>
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
				</view>
			</view>
			</view> -->
	</view>
	
</template>

<script>
	import uCharts from '../tools/u-charts/u-charts.js';
	
	var _self;
	var canvaLineA = null;
	var canvaLineB = null;
	var canvaLineC = null;
	var canvaLineD = null;
	var canvaLineE = null;
	var canvaLineF = null;
	var canvaColumn = null;

	import res from '../../common/data.json';
	export default {
		data: function(){
			
			return {
				deviceName:'Y1-A0BC',
				deviceNamePld:"Y1-A0BC_PLD",
				deviceNameBs:"Y1-A0BC_BS",
				deviceNameSsxy:"Y1-A0BC_SSXY",
				deviceNameXtpl:"Y1-A0BC_XTPL",
				deviceNameXynd:"Y1-A0BC_XYND",
				deviceNameSzxy:"Y1-A0BC_SZXY",
				braceletCurve:{},
				braceletCurve_SSXY:[],
				braceletCurve_PLD:[],
				braceletCurve_SZXY:[],
				braceletCurve_XTPL:[],
				braceletCurve_XTPL_Details:[],
				braceletCurve_SSXY_Details:[],
				braceletCurve_PLD_Details:[],
				braceletCurve_SZXY_Details:[],
				braceletCurve_BS_Details:[],
				braceletCurve_XYND_Details:[],
				braceletCurve_BS:[],
				braceletCurve_XYND:[],
				gl:[],
				fs:[],
				llgl:[],
				ycgl:[],
				rfdl:[],
				timeRound:[],
				windStationName: '',
				isFrameShow: false,
				count: 0,
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				sanJiao: 'sanJiaoDown',
				XT_Num:[],
				XT_Data:[],
				dataInformation:{
					XYNDTime:'',
					XTPL:'',
					PLD:'',
					BS:'',
					SSXY:'',
					SZXY:'',
					XYND:'',
					XTPLTime:'',
					PLDTime:'',
					BSTime:'',
					SSXYTime:'',
					SZXYTime:''
				},
			}
		},
		onLoad(option) {
			this.braceletCurve = JSON.parse(option.braceletCurve);
			this.getServerData_A();
			this.getServerData_B();
			this.getServerData_C();
			this.getServerData_D();
			this.getServerData_E();
		    this.getServerData_F();
			this.getDateForInformation();
			this.cWidth = uni.upx2px(300);
			this.cHeight = uni.upx2px(200);
		},
		onShow:function(){
			this.getServerData_A();
			this.getServerData_B();
			this.getServerData_C();
			this.getServerData_D();
			this.getServerData_E();
			this.getServerData_F();
		    },
		
		computed:{
			
		   /* targetName_pld:function(){
			 return this.deviceName+"_PLD";  
		   },
		   targetName_bs:function(){
		   			 return this.deviceName+"_BS";  
		   },
		   targetName_xtpl:function(){
		   			 return this.deviceName+"_XTPL";  
		   },
		   targetName_ssxy:function(){
		   			 return this.deviceName+"_SSXY";  
		   },
		   targetName_szxy:function(){
		   			 return this.deviceName+"_SZXY";  
		   },
		   targetName_xynd:function(){
		   			 return this.deviceName+"_XYND";  
		   }, */
		   
		   backStageIp:function(){
			  return this.$store.state.wholeSituationBackStageIp;
		   }, backStagePort:function(){
			  return this.$store.state.wholeSituationBackStagePort;
		   },windpowerstationNameToId:function(){
			  return this.$store.state.windpowerstationNameToId;
		   }
		},
		mounted() {
			document.querySelector('body').setAttribute('style', 'background-color:#242424');
		},
		methods: {
			closeFrame: function() {
				this.count = this.count + 1;
				if (this.isFrameShow) {
					this.isFrameShow = false;
					this.sanJiao = 'sanJiaoDown';
				}
			},
			getDateForInformation(){
				let _this = this;
				
				Date.prototype.Format = function(fmt) {
					var o = {
						'M+': this.getMonth() + 1, //月份
						'd+': this.getDate(), //日
						'h+': this.getHours(), //小时
						'm+': this.getMinutes(), //分
						's+': this.getSeconds(), //秒
						'q+': Math.floor((this.getMonth() + 3) / 3), //季度
						S: this.getMilliseconds() //毫秒
					};
					if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
					for (var k in o)
						if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k] : ('00' + o[
							k]).substr(('' + o[k]).length));
					return fmt;
				};
				
				 /* _this.braceletCurve_PLD = _this.braceletCurve[_this.deviceNamePld];
				_this.braceletCurve_SSXY = _this.braceletCurve[_this.deviceNameSsxy];
				_this.braceletCurve_SZXY = _this.braceletCurve[_this.deviceNameSzxy];
				_this.braceletCurve_XYND = _this.braceletCurve[_this.deviceNameXynd];
				_this.braceletCurve_XTPL = _this.braceletCurve[_this.deviceNameXtpl];
				_this.braceletCurve_BS = _this.braceletCurve[_this.deviceNameBs]; */
				
				
				
				
				for(let i=_this.braceletCurve_XTPL.length-1;i<_this.braceletCurve_XTPL.length;i++){
					
					 if(i == _this.braceletCurve_XTPL.length-1){
						_this.dataInformation.XTPL = _this.braceletCurve_XTPL[i].value;
						_this.dataInformation.XTPLTime = new Date(_this.braceletCurve_XTPL[i].ts).Format('MM/dd');
					} 
					
					}
				for(let i=_this.braceletCurve_PLD.length-1;i<_this.braceletCurve_PLD.length;i++){
					
					 if(i == _this.braceletCurve_PLD.length-1){
						_this.dataInformation.PLD = _this.braceletCurve_PLD[i].value;
						_this.dataInformation.PLDTime = new Date(_this.braceletCurve_PLD[i].ts).Format('MM/dd');
					} 
					
					}	
				for(let i=_this.braceletCurve_BS.length-1;i<_this.braceletCurve_BS.length;i++){
					
					 if(i == _this.braceletCurve_BS.length-1){
						_this.dataInformation.BS = Math.round(_this.braceletCurve_BS[i].value);
						_this.dataInformation.BSTime = new Date(_this.braceletCurve_BS[i].ts).Format('MM/dd');
					} 
					
					}
				for(let i=_this.braceletCurve_SSXY.length-1;i<_this.braceletCurve_SSXY.length;i++){
					
					 if(i == _this.braceletCurve_SSXY.length-1){
						_this.dataInformation.SSXY =  Math.round(_this.braceletCurve_SSXY[i].value);
						_this.dataInformation.SSXYTime = new Date(_this.braceletCurve_SSXY[i].ts).Format('MM/dd');
					} 
					
					}
				for(let i=_this.braceletCurve_SZXY.length-1;i<_this.braceletCurve_SZXY.length;i++){
					
					 if(i == _this.braceletCurve_SZXY.length-1){
						_this.dataInformation.SZXY = Math.round(_this.braceletCurve_SZXY[i].value);
						_this.dataInformation.SZXYTime = new Date(_this.braceletCurve_SZXY[i].ts).Format('MM/dd');
					} 
					
					}
				for(let i=_this.braceletCurve_XYND.length-1;i<_this.braceletCurve_XYND.length;i++){
					
					 if(i == _this.braceletCurve_XYND.length-1){
						_this.dataInformation.XYND = _this.braceletCurve_XYND[i].value;
						_this.dataInformation.XYNDTime = new Date(_this.braceletCurve_XYND[i].ts).Format('MM/dd');
					} 
					
					}
				
				 },
			
			
			getServerData_F() {
				// 折线图
				let LineF = {
					categories: [
						'          17:26',
						'18:56',
						'19:56',
						'20:56',
						'21:56',
						'22:56',
						'23:56',
						'00:56',
						'01:56',
						'02:56',
						'03:56',
						'04:56',
						'05:56',
						'06:56',
						'07:56',
						'08:56',
						'09:56',
						'10:56',
						'11:56',
						'12:56',
						'13:56',
						'14:56',
						'15:56',
						'16:56',
						'17:56            '
					],
					series: [{
							name: '血氧浓度',
							data: [
							],
							color: '#E49066',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							/* format: val => {
								return val + 'kwh';
							}, */
							index: 0,/* 
							legendShape: 'circle' */
						},
					]
				};
				
				
				let _this = this;
				LineF.categories = [];
				LineF.series[0].data = [];
				
				
			
				_this.braceletCurve_XYND = _this.braceletCurve[_this.deviceNameXynd];
				_this.braceletCurve_XYND_Details = JSON.stringify(_this.braceletCurve_XYND);
				
				for(let i=_this.braceletCurve_XYND.length-7;i<_this.braceletCurve_XYND.length;i++){ 
					LineF.categories.push(i);
					LineF.series[0].data.push(_this.braceletCurve_XYND[i].value);
				 }
				 
			
				this.showLineF('canvasLineF', LineF);
			},
			
			
			getServerData_E() {
				// 折线图
				let LineE = {
					categories: [
						'          17:26',
						'18:56',
						'19:56',
						'20:56',
						'21:56',
						'22:56',
						'23:56',
						'00:56',
						'01:56',
						'02:56',
						'03:56',
						'04:56',
						'05:56',
						'06:56',
						'07:56',
						'08:56',
						'09:56',
						'10:56',
						'11:56',
						'12:56',
						'13:56',
						'14:56',
						'15:56',
						'16:56',
						'17:56            '
					],
					series: [{
							pointShape:'diamond',
							name: '疲劳度',
							data: [
							],
							color: '#8EDADD',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							/* format: val => {
								return val + 'kwh';
							}, */
							index: 0,/* 
							legendShape: 'circle' */
						},
					]
				};
				
				
				let _this = this;
				LineE.categories = [];
				LineE.series[0].data = [];
				
				
			
				_this.braceletCurve_PLD = _this.braceletCurve[_this.deviceNamePld];
				_this.braceletCurve_PLD_Details = JSON.stringify(_this.braceletCurve_PLD);
				
				for(let i=_this.braceletCurve_PLD.length-7;i<_this.braceletCurve_PLD.length;i++){ 
					LineE.categories.push(i);
					LineE.series[0].data.push(_this.braceletCurve_PLD[i].value);
				 }
				 
			
				this.showLineE('canvasLineE', LineE);
			},
			
			
			getServerData_D() {
				// 折线图
				let LineD = {
					categories: [
						'          17:26',
						'18:56',
						'19:56',
						'20:56',
						'21:56',
						'22:56',
						'23:56',
						'00:56',
						'01:56',
						'02:56',
						'03:56',
						'04:56',
						'05:56',
						'06:56',
						'07:56',
						'08:56',
						'09:56',
						'10:56',
						'11:56',
						'12:56',
						'13:56',
						'14:56',
						'15:56',
						'16:56',
						'17:56            '
					],
					series: [{
							pointShape:'rect',
							name: '舒张血压',
							data: [
							],
							color: '#6593B6',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							/* format: val => {
								return val + 'kwh';
							}, */
							index: 0,/* 
							legendShape: 'circle' */
						},
					]
				};
				
				
				let _this = this;
				LineD.categories = [];
				LineD.series[0].data = [];
				
				
			
				_this.braceletCurve_SZXY = _this.braceletCurve[_this.deviceNameSzxy];
				_this.braceletCurve_SZXY_Details = JSON.stringify(_this.braceletCurve_SZXY);
				
				for(let i=_this.braceletCurve_SZXY.length-7;i<_this.braceletCurve_SZXY.length;i++){ 
					LineD.categories.push(i);
					LineD.series[0].data.push(_this.braceletCurve_SZXY[i].value);
				 }
				 
			
				this.showLineD('canvasLineD', LineD);
			},
			
			getServerData_C() {
				// 折线图
				let LineC = {
					categories: [
						'          17:26',
						'18:56',
						'19:56',
						'20:56',
						'21:56',
						'22:56',
						'23:56',
						'00:56',
						'01:56',
						'02:56',
						'03:56',
						'04:56',
						'05:56',
						'06:56',
						'07:56',
						'08:56',
						'09:56',
						'10:56',
						'11:56',
						'12:56',
						'13:56',
						'14:56',
						'15:56',
						'16:56',
						'17:56            '
					],
					series: [{
							pointShape:'triangle',
							name: '收缩血压',
							data: [
							],
							color: '#AF8DD1',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							/* format: val => {
								return val + 'kwh';
							}, */
							index: 0,/* 
							legendShape: 'circle' */
						},
					]
				};
				
				
				let _this = this;
				LineC.categories = [];
				LineC.series[0].data = [];
				
				
			
				_this.braceletCurve_SSXY = _this.braceletCurve[_this.deviceNameSsxy];
				_this.braceletCurve_SSXY_Details = JSON.stringify(_this.braceletCurve_SSXY);
				
				for(let i=_this.braceletCurve_SSXY.length-7;i<_this.braceletCurve_SSXY.length;i++){ 
					LineC.categories.push(i);
					LineC.series[0].data.push(_this.braceletCurve_SSXY[i].value);
				 }
				 
				_this.XT_Num = LineC.categories;
				_this.XT_Data = LineC.series[0].data;
				this.showLineC('canvasLineC', LineC);
			},
			
			getServerData_B() {
				// 折线图
				let LineB = {
					categories: [
						'          17:26',
						'18:56',
						'19:56',
						'20:56',
						'21:56',
						'22:56',
						'23:56',
						'00:56',
						'01:56',
						'02:56',
						'03:56',
						'04:56',
						'05:56',
						'06:56',
						'07:56',
						'08:56',
						'09:56',
						'10:56',
						'11:56',
						'12:56',
						'13:56',
						'14:56',
						'15:56',
						'16:56',
						'17:56            '
					],
					legend:[{
						show:true,
						disableLegend:false,
					}],
					series: [{
							name: '步数',
							data: [
							],
							color: '#DDA9B8',
							textColor: '#FFFFFF',
							textSize: this.seriesTextSize,
							/* format: val => {
								return val + 'kwh';
							}, */
							index: 0,/* 
							legendShape: 'circle' */
						},
					]
				};
				
				
				let _this = this;
				LineB.categories = [];
				LineB.series[0].data = [];
				
				
			
				_this.braceletCurve_BS = _this.braceletCurve[_this.deviceNameBs];
				_this.braceletCurve_BS_Details = JSON.stringify(_this.braceletCurve_BS);
				
				for(let i=_this.braceletCurve_BS.length-7;i<_this.braceletCurve_BS.length;i++){ 
					LineB.categories.push(i);
					LineB.series[0].data.push(_this.braceletCurve_BS[i].value);
				 }
				 
			
				this.showLineB('canvasLineB', LineB);
			},
			
			getServerData_A() {
				// 折线图
				let LineA = {
					categories: [
						'          17:26',
						'18:56',
						'19:56',
						'20:56',
						'21:56',
						'22:56',
						'23:56',
						'00:56',
						'01:56',
						'02:56',
						'03:56',
						'04:56',
						'05:56',
						'06:56',
						'07:56',
						'08:56',
						'09:56',
						'10:56',
						'11:56',
						'12:56',
						'13:56',
						'14:56',
						'15:56',
						'16:56',
						'17:56            '
					],
					legend:[{
						show:true,
					}],
					series: [{
							pointShape:'diamond',
							name: '心跳频率',
							disableLegend:false,
							data: [{
								value:6,
								}
								
							],
							color: '#A1B95B',
							textColor: '#bdbdbd',
							textSize: this.seriesTextSize,
							/* format: val => {
								return val + 'kwh';
							}, */
							index: 0,/* 
							legendShape: 'circle' */
						},
					]
				};
				
				
				let _this = this;
				LineA.categories = [];
				LineA.series[0].data = [];
				
				_this.braceletCurve_XTPL = _this.braceletCurve[_this.deviceNameXtpl];
				
				_this.braceletCurve_XTPL_Details = JSON.stringify(_this.braceletCurve_XTPL);
				
				
				for(let i=_this.braceletCurve_XTPL.length-7;i<_this.braceletCurve_XTPL.length;i++){ 
					LineA.categories.push(i);
					LineA.series[0].data.push(_this.braceletCurve_XTPL[i].value);
					/* if(i == _this.braceletCurve_XTPL.length){
						_this.XTPL = _this.braceletCurve_XTPL[i].value;
					} */
				 }
				 
			
				this.showLineA('canvasLineA', LineA);
			},
			
			showLineF(canvasId, chartData) {
				var _self = this;
				canvaLineF = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
			
					fontSize: 11,
					legend: {
						show: false,
						position: 'top',
						float: 'left',
						fontColor: '',
						itemGap: '4',
						itemWidth: '3',
						fontSize:'13'
					},
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						disableGrid:true,
						axisLine:false,
						type: 'grid',
						disabled: true,
						gridColor: 'silver',
						fontColor: 'silver',
						gridType: 'solid',
						gridColor: '#ececec',
						axisLineColor: '#ececec',
						labelCount: '3',
						itemCount:'3',
						
					},
					yAxis: {
						disableGrid:true,
						data: [{
								type: 'value',
								fontColor: 'silver',
								disabled: true, //y轴轴线
								min: 0,
								max: 30,
								position: 'left',
								axisLineColor: '#ececec',
								title: '',
								titleFontColor: 'silver'
							}
						],
						gridColor: '#ececec',
						splitNumber: 3,
						gridType: 'solid',
						dashLength: 8,
						showTitle: 'true',
						/* format: val => {
							return val.toFixed(0) + '元';
						} */
					},
					width: _self.cWidth * _self.pixelRatio ,
					height: _self.cHeight * _self.pixelRatio ,
					extra: {
						line: {
							type: 'line',
							width: '1'
						}
					}
				});
			},
			
			
			showLineE(canvasId, chartData) {
				var _self = this;
				canvaLineE = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
			
					fontSize: 11,
					legend: {
						show: false,
						position: 'top',
						float: 'left',
						fontColor: 'silver',
						itemGap: '4',
						itemWidth: '3',
					    fontSize:'13'
					},
					dataLabel: true,
					dataPointShape: false,
					dataLabel:false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						disableGrid:true,
						axisLine:false,
						type: 'grid',
						disabled: true,
						gridColor: 'silver',
						fontColor: 'silver',
						gridType: 'solid',
						gridColor: '#ececec',
						axisLineColor: '#ececec',
						labelCount: '3',
						itemCount:'3',
					},
					yAxis: {
						disableGrid:true,
						data: [{
								type: 'value',
								fontColor: 'silver',
								disabled: true, //y轴轴线
								min: 0,
								max: 30,
								position: 'left',
								axisLineColor: '#ececec',
								title: '',
								titleFontColor: 'silver'
							}
						],
						gridColor: '#ececec',
						splitNumber: 3,
						gridType: 'solid',
						dashLength: 8,
						showTitle: 'true',
						/* format: val => {
							return val.toFixed(0) + '元';
						} */
					},
					width: _self.cWidth * _self.pixelRatio ,
					height: _self.cHeight * _self.pixelRatio ,
					extra: {
						line: {
							type: 'line',
							width: '1'
						}
					}
				});
			},
			
			showLineC(canvasId, chartData) {
				var _self = this;
				canvaLineC = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
			
					fontSize: 11,
					legend: {
						show: false,
						position: 'top',
						float: 'left',
						fontColor: 'silver',
						itemGap: '4',
						itemWidth: '3',
						fontSize:'13'
					},
					dataLabel: true,
					dataPointShape: false,
					dataLabel:false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						disableGrid:true,
						axisLine:false,
						type: 'grid',
						disabled: true,
						gridColor: 'silver',
						fontColor: 'silver',
						gridType: 'solid',
						gridColor: '#ececec',
						axisLineColor: '#ececec',
						labelCount: '3',
						itemCount:'3',
					},
					yAxis: {
						disableGrid:true,
						data: [{
								type: 'value',
								fontColor: 'silver',
								disabled: true, //y轴轴线
								min: 0,
								max: 30,
								position: 'left',
								axisLineColor: '#ececec',
								title: '',
								titleFontColor: 'silver'
							}
						],
						gridColor: '#ececec',
						splitNumber: 3,
						gridType: 'solid',
						dashLength: 8,
						showTitle: 'true',
						/* format: val => {
							return val.toFixed(0) + '元';
						} */
					},
					width: _self.cWidth * _self.pixelRatio ,
					height: _self.cHeight * _self.pixelRatio ,
					extra: {
						line: {
							type: 'line',
							width: '1'
						}
					}
				});
			},
			
			showLineD(canvasId, chartData) {
				var _self = this;
				canvaLineD = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
			
					fontSize: 11,
					legend: {
						show: false,
						position: 'top',
						float: 'left',
						fontColor: 'silver',
						itemGap: '4',
						itemWidth: '3',
						fontSize:'13'
					},
					dataLabel: true,
					dataPointShape: false,
					dataLabel:false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						disableGrid:true,
						axisLine:false,
						type: 'grid',
						disabled: true,
						gridColor: 'silver',
						fontColor: 'silver',
						gridType: 'solid',
						gridColor: '#ececec',
						axisLineColor: '#ececec',
						labelCount: '3',
						itemCount:'3',
					},
					yAxis: {
						disableGrid:true,
						data: [{
								type: 'value',
								fontColor: 'silver',
								disabled: true, //y轴轴线
								min: 0,
								max: 30,
								position: 'left',
								axisLineColor: '#ececec',
								title: '',
								titleFontColor: 'silver'
							}
						],
						gridColor: '#ececec',
						splitNumber: 3,
						gridType: 'solid',
						dashLength: 8,
						showTitle: 'true',
						/* format: val => {
							return val.toFixed(0) + '元';
						} */
					},
					width: _self.cWidth * _self.pixelRatio ,
					height: _self.cHeight * _self.pixelRatio ,
					extra: {
						line: {
							type: 'line',
							width: '1'
						}
					}
				});
			},
			
			showLineA(canvasId, chartData) {
				var _self = this;
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					dataPointShapeType:'hollow',
					fontSize: 11,
					legend: {
						show: false,
						position: 'top',
						float: 'left',
						fontColor: 'silver',
						itemGap: '4',
						itemWidth: '3',
						fontSize:'13'
					},
					dataPointShape: false,
					dataLabel:false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						disableGrid:true,
						axisLine:false,
						type: 'grid',
						disabled: true,
						gridColor: 'silver',
						fontColor: 'silver',
						gridType: 'solid',
						gridColor: '#ececec',
						axisLineColor: '#ececec',
						labelCount: '3',
						itemCount:'3',
					},
					yAxis: {
						disableGrid:true,
						data: [{
								type: 'value',
								fontColor: 'silver',
								disabled: true, //y轴轴线
								min: 0,
								max: 30,
								position: 'left',
								axisLineColor: '#ececec',
								title: '',
								titleFontColor: 'silver'
							}
						],
						gridColor: '#ececec',
						splitNumber: 3,
						gridType: 'solid',
						dashLength: 8,
						showTitle: 'true',
						/* format: val => {
							return val.toFixed(0) + '元';
						} */
					},
					width: _self.cWidth * _self.pixelRatio ,
					height: _self.cHeight * _self.pixelRatio ,
					extra: {
						line: {
							type: 'line',
							width: '1'
						}
					}
				});
			},
			
			showLineB(canvasId, chartData) {
				var _self = this;
				canvaLineB = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
			
					fontSize: 11,
					legend: {
						show: false,
						position: 'top',
						float: 'left',
						fontColor: '#4D4DFF',
						itemGap: '4',
						itemWidth: '3',
						fontSize:'13'
					},
					dataLabel: true,
					dataPointShape: false, /* 图例标点 */
					dataLabel:false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: false,
					xAxis: {
						disableGrid:true,
						axisLine:false,
						type: 'grid',
						disabled: true,
						gridColor: 'silver',
						fontColor: 'silver',
						gridType: 'solid',
						gridColor: '#ececec',
						axisLineColor: '#ececec',
						labelCount: '3',
						itemCount:'3',
					},
					yAxis: {
						disableGrid:true,
						data: [{
								type: 'value',
								fontColor: 'silver',
								disabled: true, //y轴轴线
								min: 0,
								max: 30,
								position: 'left',
								axisLineColor: '#ececec',
								title: '',
								titleFontColor: 'silver'
							}
						],
						gridColor: '#ececec',
						splitNumber: 3,
						gridType: 'solid',
						dashLength: 8,
						showTitle: 'true',
						/* format: val => {
							return val.toFixed(0) + '元';
						} */
					},
					width: _self.cWidth * _self.pixelRatio ,
					height: _self.cHeight * _self.pixelRatio ,
					extra: {
						line: {
							type: 'line',
							width: '1'
						}
					}
				});
			},
			
			touchLineF(e) {
				canvaLineF.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			
			touchLineE(e) {
				canvaLineE.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			
			touchLineD(e) {
				canvaLineD.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			
			touchLineC(e) {
				canvaLineC.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			
			touchLineB(e) {
				canvaLineB.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data;
					}
				});
			},
			
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			
			moveLineB(e) {
				canvaLineB.scroll(e);
			},
			
			moveLineC(e) {
				canvaLineC.scroll(e);
			},
			
			moveLineD(e) {
				canvaLineD.scroll(e);
			},
			
			moveLineE(e) {
				canvaLineD.scroll(e);
			}
		}
			
	}
</script>

<style>
	body {
		font-family: '方正兰亭细黑_GBK';
		font-size: 20px;
		color: silver;
		background: #000;
	}
	
	@font-face {
		font-family: '方正兰亭细黑_GBK';
		src: url(../../static/fzltxh.TTF);
	}
	
	page {
		background-color: #1f1f1f;
		font-family: '方正兰亭细黑_GBK';
		overflow-x: hidden;
	}
	.speedPowerDiagram {
		width: 100px;
		height: 30px;
		user-select: text;
		-webkit-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		color: silver;
		float: left;
		margin-top: 18px;
		margin-left: 9px;
		font-size: 11px;
	}
	
	/* .qiun-charts {
		width: 300upx;
		height: 200upx; 
	} */
	.charts {
		position: absolute;
		top: 13%;
		left: 1.5%;
		width: 300upx;
		height: 200upx;
		margin-top: 13%;
	}
	.line{
		/* background-color: #f9f9f9; */
		
		position: absolute;
		width: 100%;
		height: 620px;
		background-color: #242424;
		padding-top: 2%;
		color: #BDBDBD;
	}
	.line_One{/* 
		margin: auto; */
		width: 100%;
		height: 200px;
		background-color: #242424;
		margin-top: 10px;
		float: left;
	}
	.line_Two,.line_Three{/*
		margin: auto; */
		width: 100%;
		height: 200px;
		background-color: #242424;
		/* margin-top: 10px; */
		float: left;
	}
	.line_One_X,.line_T_P,.line_T_S{/*
		margin: auto; */
		position: relative;
		float: left;
		width: 42%;
		height: 186px;
		/* background-color: #ececec; */
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
		border-radius: 8%;
		margin-left: 6%;
		margin-top: 2%;
	}
	.line_One_B,.line_T_Z,.line_T_X{/*
		margin: auto; */
		position: relative;
		float: right;
		width: 42%;
		height: 186px;
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1) 0%, rgba(193, 94, 21, 0.2) 100%);
		border-radius: 8%;
		margin-right: 6%;
		margin-top: 2%;
	}
	/* .line_T_S{
		float: left;
		width: 100px;
		height: 150px;
		background-color: #ececec;
		border-radius: 20%;
		margin-left: 8%;
		margin-top: 5%;
	} */
	.clear{
		clear: both;
	}
	.font{
		position: absolute;
		font-size: 16px;
		font-weight: 1000;
		top: 10%;
		left: 8%;
	}
	.date{
		position: absolute;
		top: 22%;
		left: 8%;
	}
	.digital{
		font-size: 39px;
		font-weight: 900;
		position: absolute;
		top: 70%;
		left: 8%;
	}
	.unit{
		font-size: 16px;
		position: absolute;
		top: 80%;
		left: 63%;
	}
</style>