sisMobilePhone/components/detail/Detail.vue

<template>
	<view class="contentike">
		<view class="fixed" style="color: #FFFDEF;">
			<cu-custom bgColor="background-color: #1f1f1f;" :isBack="true">
				<block slot="backText">
					<view style="height: 80rpx;line-height: 80rpx; color: #FFFDEF;" @tap="goToIndex()">返回</view>
					<view class="addressName">{{address}}</view>
				</block>
				
			</cu-custom>
		</view>
		<view class="threeTarget">
			<view class="target">
				<view class="target_zi">指标</view>
				<view class="target_dianLiang">日发电量</view>
			</view>
			<view class="target">
				<view style="font-size: 16px;margin-top: -7px;">数值</view>
				<view class="target_count">40</view>
			</view>
			<view class="target">
				<view style="font-size: 16px;margin-top: -7px;">单位</view>
				<view class="target_danWei">kw/h</view>
			</view>
		</view>

		<view class="qiun-charts">
			<view class="speedPowerDiagram">24小时指标曲线图</view>
			<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchstart="touchLineA"></canvas>
		</view>


		<view class="qiun-columnCharts">
			<view class="sevenDayColunm">7天指标柱状图</view>
			<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" @touchstart="touchColumn"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '../../components/tools/u-charts/u-charts.js';
	import res from '../../common/data.json';
	var _self;
	var canvaLineA;
	var canvaColumn = null;
	export default {
		data() {
			let data = {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				serverData: '',
				address:'',

			}


			return data;
		},
created: function() {
			this.address = this.getWindPowerStationNameToSessionStorage();
			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
		},
		onShow() {
			this.windPowerStationId = uni.getStorageSync('windPowerStationId');
			this.address = this.getWindPowerStationNameToSessionStorage();
			// this.hideModals();
		},
		onLoad() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(400);
			this.getColumnServerData();
			this.getLineServerData();
		},

		onReady() {

		},

		methods: {
			pushWindPowerStationNameToSessionStorage(windpowerstationName) {
							uni.setStorageSync('windpowerstationName', windpowerstationName);
							//sessionStorage.setItem('windpowerstationName', windpowerstationName);
							//alert("v"+ sessionStorage.getItem("windpowerstationName"));
							//this.common.goback('/pages/index/Index');
						},
						getWindPowerStationNameToSessionStorage() {
							uni.getStorageSync('windpowerstationName');
							return uni.getStorageSync('windpowerstationName');
						},
			getLineServerData() {
				// 折线图
				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            '
					],
					series: [{
						name: '功率',
						data: [17, 21, 19, 22, 20.2, 19.1, 22.4, 23.8, 21.5, 22.9, 19.2, 22.4, 18.7, 22.1, 21.4, 22.7, 18.4, 18.4,
							21.8, 22.5, 22.9, 19.8, 22.7,
							23, 22.8
						],
						color: '#4A80B1',
						textColor: '#FFFFFF',
						textSize: this.seriesTextSize,
						format: (val) => {
							return val + "kwh"
						},
						index: 0,
						legendShape: "circle",

					}, ]
				};
				this.showLineA("canvasLineA", LineA);
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'line',
					fontSize: 11,
					legend: {
						show: true,
						position: "top",
						float: "right",
						fontColor: "silver",
						itemGap: "4",
					},
					dataLabel: false,
					dataPointShape: false,
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					categories: chartData.categories,
					series: chartData.series,
					animation: true,
					xAxis: {
						type: 'grid',
						gridColor: 'silver',
						fontColor: 'silver',
						gridType: 'solid',
						gridColor: '#2E2E2E',
						axisLineColor: "#2E2E2E",
						labelCount: "3",
						// itemCount:"3"
					},
					yAxis: {
						data: [{
								type: "value",
								fontColor: 'silver',
								disabled: false, //y轴轴线
								min: 0,
								max: 40,
								position: "left",
								axisLineColor: "#2E2E2E",
								title: "         功率:(kw/h)",
								titleFontColor: "silver"
							},
							{
								fontColor: "silver",
								disabled: false, //y轴轴线 
								min: 0,
								max: 40,
								position: "right",
								axisLineColor: "#2E2E2E",
								title: "功率:(kwh)",
								titleFontColor: "silver"
							}
						],

						gridColor: "#2E2E2E",
						splitNumber: 4,
						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',
						}
					}
				});

			},
			touchLineA(e) {
				canvaLineA.showToolTip(e, {
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data
					}
				});
			},
			moveLineA(e) {
				canvaLineA.scroll(e);
			},
			getColumnServerData() {
				res.data.data = res.data;
				let Column = {
					categories: [],
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				Column.categories = res.data.data.ColumnB.categories;
				Column.series = res.data.data.ColumnB.series;
				_self.textarea = JSON.stringify(res.data.data.ColumnB);
				_self.showColumn("canvasColumn", Column);
			},
			showColumn(canvasId, chartData) {
				canvaColumn = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'column',
					legend: {
						show: true,
						fontSize: 12,
						padding: 5,
						fontColor: "silver",
						itemGap: "4",
						// margin:0,
						position: "top",
						float: "right"
					},
					fontSize: 11,
					background: '#242424',
					pixelRatio: _self.pixelRatio,
					animation: true,
					categories: chartData.categories,
					series: chartData.series,

					xAxis: {
						// disabled:true,
						rotateLabel: true,
						disableGrid: true,
						axisLineColor: '#2D2D2D',
						fontColor: "#ffffff",
						// gridColor:'#2D2D2D',
					},
					yAxis: {
						showTitle: true,
						// disableGrid:true,
						gridType: 'solid',
						dashLength: 8,
						gridColor: '#2D2D2D',
						splitNumber: 5,
						min: 0,
						max: 40,
						data: [{
							min: 0,
							max: 40,
							position: 'left',
							axisLine: false,
							fontColor: "silver",
							// title: '7天功率柱状图',
							title: "          功率:(kw/h)",
							titleFontColor: "silver",
							// title: '功率(kw/h)',
							// titleFontColor: '#FFFFFF',
							titleFontSize: 11,
							format: (val) => {
								return val.toFixed(0) + ''
							},
						}]
					},
					dataLabel: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					extra: {
						column: {
							type: 'group',
							// width: _self.cWidth * _self.pixelRatio * 0.45 / chartData.categories.length
							width: 12,
							lineStyle: {
								width: 5,
							}
						}
					}
				});

			},
			goToIndex(){
				uni.switchTab({
				     url: '/pages/index/Index'
				    });
			},
			touchColumn(e) {
				canvaColumn.showToolTip(e, {
					format: function(item, category) {
						if (typeof item.data === 'object') {
							return category + ' ' + item.name + ':' + item.data.value
						} else {
							return category + ' ' + item.name + ':' + item.data
						}
					}
				});
			},
		}
	}
</script>
<style>
	page {
		/* background-color: #FFFFFF; */
		font-family:'方正兰亭细黑_GBK';
	}

	body {
		background: #1F1F1F;
		font-family:'方正兰亭细黑_GBK';
		font-size: 14px;
		color: silver;
	}
@font-face {
	font-family:'方正兰亭细黑_GBK';
	src: url(../../static/方正兰亭细黑_GBK.TTF);
}
	.addressName {
		/* width: 100%; */
		/* background-color: white; */
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 100px;
		color: #FFFDEF;
	}

	.target_dianLiang {
		margin-top: 15px;
		font-size: 16px;
		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
	}

	.target_count {
		margin-top: 15px;
		font-size: 16px;
		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
	}

	.target_danWei {
		margin-top: 15px;
		font-size: 16px;
		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;

	}

	.threeTarget {
		width: 100%;
		height: 120px;
		background-color: #242424;
		display: -webkit-flex;
		display: flex;
		justify-content: space-around;
		float: left;
	}

	.target {
		width: 28%;
		height: 78px;
		background: -webkit-linear-gradient(top, rgba(159, 131, 111, 0.1)0%, rgba(193, 94, 21, 0.2)100%);
		border-radius: 5px;
		float: left;
		margin-top: 20px;
		text-align: center;
		color: silver;
		padding-top: 20px;
		font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
	}

	.target_zi {
		font-size: 16px;
		text-align: center;
		margin-top: -7px;
	}

	.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: 750upx;
		height: 400upx;
		margin-top: 140px;
		background-color: #242424;
	}

	.charts {
		width: 750upx;
		height: 400upx;
	}

	.qiun-columnCharts {
		width: 750upx;
		height: 400upx;
		margin-top: 20px;
		background-color: #242424;
	}

	.sevenDayColunm {
		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: 10px;
		font-size: 11px;
	}
</style>