airconditioner/sources/client/vrv-moblie/pages/dataCurve/dataCurve.vue

<template>
	<view>
		<view class="all">

			<view class="chart">
				<view class="charts-box">
					<best-gauge :config="gaugeOption"></best-gauge>
				</view>

				<view class="charts-box">
					<best-gauge :config="gaugeOption2"></best-gauge>
				</view>
			</view>

			<view class="white">
				<view class="title1">
					<text class="param">空调排风温度变化</text>
					<view class="tiao"></view>
				</view>

				<view>
					<canvas canvas-id="canvasLineA" id="canvasLineA" class="charts" @touchmove="moveLineA"
						@touchend="moveLineA"></canvas>
					<!-- 画布，图表的HTML部分-->
				</view>

			</view>

			<view class="white1">
				<view class="title1">
					<text class="param">空调排风湿度变化</text>
					<view class="tiao"></view>
				</view>

				<view>
					<canvas canvas-id="canvasLineA11" id="canvasLineA11" class="charts" @touchmove="moveLineA11"
						@touchend="moveLineA11"></canvas>
					<!-- 画布，图表的HTML部分-->
				</view>
			</view>

			<view class="anniu">
				<image class="anniu" src="../../static/设备菜单/前往列表@2x.png" @tap="back"></image>
			</view>
		</view>
	</view>
</template>

<script>
	//仪表盘组件
	import bestGauge from '@/components/best-gauge/best-gauge.vue'

	//引入u-charts组件
	import uCharts from '@/components/u-charts/u-charts.js'

	var _self; //用于全局使用this

	var _self11; //用于全局使用this

	var canvaLineA = null; //uCharts实例

	var canvaLineA11 = null; //uCharts实例


	export default {
		components: {
			bestGauge,
		},

		data() {
			let _width = uni.upx2px(350);
			return {
				cWidth: '',
				cHeight: '', //画布的宽高

				//仪表盘部分
				gaugeOption: { //定义参数
					id: 'gaugeId0',
					value: 75.8,
					axisTickLength: 2 //该属性与axisTick互斥，存在axisTickLength并大于0，axisTick就无效
				},

				gaugeOption2: { //定义参数
					name: 'CK01排风湿度显示',
					id: 'gaugeId1',
					value: 60.5,
					unit: '%',
					axisTickLength: 2 //该属性与axisTick互斥，存在axisTickLength并大于0，axisTick就无效
				},

				//折线图部分

				//温度
				data: { //数据
					categories: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
					series: [{
						name: "温度",
						data: [40, 30, 36, 44, 34, 30, 22],
					}]
				},

				//湿度
				data11: { //数据
					categories11: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
					series11: [{
						name: "湿度",
						data: [40, 30, 36, 44, 38, 34, 30],
					}]
				},
			}
		},

		onLoad() {
			this.cWidth = uni.upx2px(702);
			this.cHeight = uni.upx2px(500); //设置宽高
			_self = this //声明this
			_self.showLineA("canvasLineA", _self.data); //触发执行函数

			_self11 = this //声明this
			_self11.showLineA11("canvasLineA11", _self11.data11); //触发执行函数
		},

		methods: {
			back() {
				uni.navigateTo({
					url: '/pages/device/deviceInfo/deviceInfo'
				})
			},
			showLineA(canvasId, chartData) {
				canvaLineA = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
					$this: _self, //指针
					canvasId: canvasId, //id
					type: 'line', //类型
					colors: ['#F45E41'], //每一条的颜色
					fontSize: 14, //字体大小
					padding: [15, 15, 0, 15], //空白区域值
					legend: { //图例相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false, //显示数据标签内容值
					categories: chartData.categories, //数据类别
					series: chartData.series, //数据列表
					xAxis: { //X轴配置
						gridColor: '#CCCCCC', //X轴网格颜色
						gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						dashLength: 8, //X轴网格为虚线时，单段虚线长度
					},
					yAxis: { //y轴配置
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
					},
					width: _self.cWidth, //canvas宽度，单位为px
					height: _self.cHeight, //canvas高度，单位为px
					extra: { //扩展配置
						line: {
							type: 'curve' //曲线  curve曲线，straight直线
						}
					}
				});
			},
			moveLineA(e) {
				canvaLineA.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data + '℃'
					}
				});
			},


			//湿度
			showLineA11(canvasId, chartData) {
				canvaLineA11 = new uCharts({ //这些配置项的意思看这：https://www.kancloud.cn/qiun/ucharts/1172125
					$this: _self11, //指针
					canvasId: canvasId, //id
					type: 'line', //类型
					colors: ['#007AFF'], //每一条的颜色
					fontSize: 14, //字体大小
					padding: [15, 15, 0, 15], //空白区域值
					legend: { //图例相关配置
						show: true,
						padding: 5,
						lineHeight: 11,
						margin: 0,
					},
					dataLabel: false, //显示数据标签内容值
					categories: chartData.categories11, //数据类别
					series: chartData.series11, //数据列表
					xAxis: { //X轴配置
						gridColor: '#CCCCCC', //X轴网格颜色
						gridType: 'dash', //X轴网格线型 'solid'为实线、'dash'为虚线`
						dashLength: 8, //X轴网格为虚线时，单段虚线长度
					},
					yAxis: { //y轴配置
						gridType: 'dash',
						gridColor: '#CCCCCC',
						dashLength: 8,
					},
					width: _self11.cWidth, //canvas宽度，单位为px
					height: _self11.cHeight, //canvas高度，单位为px
					extra: { //扩展配置
						line: {
							type: 'curve' //曲线  curve曲线，straight直线
						}
					}
				});
			},
			moveLineA11(e) {
				canvaLineA11.showToolTip(e, { //详情框
					format: function(item, category) {
						return category + ' ' + item.name + ':' + item.data + '%'
					}
				});
			},

		}

	}
</script>

<style>
	.anniu {
		width: 116rpx;
		height: 116rpx;
		float: right;
		margin-top: 20rpx;
	}

	.charts {
		margin-top: 60rpx;
		width: 702rpx;
		height: 500rpx;
		background-color: #FFFFFF;
	}

	.title1 {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tiao {
		width: 60px;
		height: 3px;
		margin-top: 20rpx;
		background: #007AFF;
	}

	.param {
		font-size: 38rpx;
		font-weight: 550;
		margin-top: 40rpx;
	}

	.white {
		width: 702rpx;
		height: 720rpx;
		margin-left: 24rpx;
		background-color: white;
		margin-top: 28rpx;
		border-radius: 10rpx;
	}

	.white1 {
		width: 702rpx;
		height: 720rpx;
		margin-left: 24rpx;
		background-color: white;
		margin-top: 28rpx;
		border-radius: 10rpx;
	}

	.chart {
		font-size: 26rpx;
		height: 300px;
		/* background:white; */
		background: rgb(30, 130, 250);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}




	.charts-box {
		margin-left: 8rpx;
		margin-right: 8rpx;
	}
</style>