humitureApp/pages/home/home.vue

<template>
	<view class="container">
		<view class="carousel-section">
			<swiper class="carousel" indicator-dots circular autoplay interval="3000">
				<swiper-item v-for="(item, index) in carouselList" :key="index" class="carousel-item"><image :src="item.src" /></swiper-item>
			</swiper>
		</view>
		<view class="qiun-columns">
			<view class="qiun-bg-white qiun-title-bar qiun-common-mt"><view class="qiun-title-dot-light">设备概览</view></view>
			<view class="qiun-charts"><canvas canvas-id="canvasRing" id="canvasRing" class="charts" @touchstart="touchRing"></canvas></view>
		</view>
	</view>
</template>

<script>
import { statisticsDevice } from '@/api/device.js';
import uCharts from '@/js_sdk/u-charts/u-charts/u-charts.js';
var canvaRing = null;
var _self;
export default {
	data() {
		return {
			cWidth: '',
			cHeight: '',
			pixelRatio: 1,
			carouselList: [
				{
					src: '/static/banner1.png'
				},
				{
					src: '/static/banner2.png'
				},
				{
					src: '/static/banner1.png'
				}
			],
			chartData:{
				title: {name:'设备总量',value:0},
				series: [{ name: '在线', data: 0 }, { name: '离线', data: 0 }, { name: '未激活', data: 0 }]
			}
		};
	},
	onLoad() {
		_self = this;
		this.cWidth = uni.upx2px(750);
		this.cHeight = uni.upx2px(500);
		this.fetchStatisticsDevice()
		this.showRing('canvasRing', this.chartData);
	},
	methods: {
		fetchStatisticsDevice() {
			statisticsDevice().then(response => {
				console.log(response.data);
				this.chartData.series[0].data = response.data.online
				this.chartData.series[1].data = response.data.offline
				this.chartData.series[2].data = response.data.total - response.data.active
				this.chartData.title.value = response.data.total
				this.showRing('canvasRing', this.chartData);
			});
		},
		showRing(canvasId, chartData) {
			canvaRing = new uCharts({
				$this: _self,
				canvasId: canvasId,
				type: 'ring',
				fontSize: 11,
				padding: [5, 5, 5, 5],
				legend: {
					show: true,
					position: 'right',
					float: 'center',
					itemGap: 10,
					padding: 5,
					lineHeight: 26,
					margin: 5,
					//backgroundColor:'rgba(41,198,90,0.2)',
					//borderColor :'rgba(41,198,90,0.5)',
					borderWidth: 1
				},
				background: '#FFFFFF',
				pixelRatio: _self.pixelRatio,
				series: chartData.series,
				animation: false,
				width: _self.cWidth * _self.pixelRatio,
				height: _self.cHeight * _self.pixelRatio,
				disablePieStroke: true,
				dataLabel: false,
				subtitle: {
					name: chartData.title.value + '',
					color: '#7cb5ec',
					fontSize: 25 * _self.pixelRatio
				},
				title: {
					name: chartData.title.name,
					color: '#666666',
					fontSize: 15 * _self.pixelRatio
				},
				extra: {
					pie: {
						offsetAngle: -105,
						ringWidth: 40 * _self.pixelRatio,
						labelWidth: 15
					}
				}
			});
		},
		touchRing(e) {
			canvaRing.touchLegend(e, {
				animation: false
			});
			canvaRing.showToolTip(e, {
				format: function(item) {
					return item.name + ':' + item.data;
				}
			});
		}
	}
};
</script>

<style lang="scss">
page {
	.cate-section {
		position: relative;
		z-index: 5;
		margin-top: 10upx;
	}
	.carousel-section {
		padding: 0;
		.carousel {
			.carousel-item {
				padding: 0;
			}
		}
	}
}
.carousel-section {
	position: relative;
	padding-top: 10px;
}
.carousel {
	width: 100%;
	height: 350upx;

	.carousel-item {
		width: 100%;
		height: 100%;
		padding: 0 28upx;
		overflow: hidden;
	}

	image {
		width: 100%;
		height: 100%;
		border-radius: 10upx;
	}
}
.hover {
	background-color: #eee;
}
.cate-section {
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	padding: 30upx 22upx;
	background: #fff;
	.cate-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		font-size: $font-sm + 2upx;
		color: $font-color-dark;
	}
	/* 原图标颜色太深,不想改图了,所以加了透明度 */
	image {
		width: 88upx;
		height: 88upx;
		margin-bottom: 14upx;
		border-radius: 50%;
		opacity: 0.7;
		box-shadow: 4upx 4upx 20upx rgba(250, 67, 106, 0.3);
	}
}
</style>
<style>
/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
.qiun-charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}

.charts {
	width: 750upx;
	height: 500upx;
	background-color: #ffffff;
}
</style>