baozhida-building-app/src/pages/stat/index.vue

<template>
	<view>
		<uv-navbar title="IBMS楼宇集成系统" :placeholder="true" :titleStyle="{color:'#ffffff'}" bgColor="#1d345e"
			leftIcon=""></uv-navbar>
		<view class="stat_echart_box">
			<x-Echarts :options="statOption"></x-Echarts>
		</view>
		<view class="stat_echart_box">
			<x-Echarts :options="chartOption"></x-Echarts>
		</view>
		<view class="stat_box_line">
			<view class="stat_line">
				<view class="space_between">
					<view style="width: 32%;">
						<view class="stat_title_circle">PM3.4</view>
						<view class="stat_title_gray">HWSEFSASF</view>
					</view>
					<view style="flex: 1;">
						<uv-line-progress :percentage="50" activeColor="#035bfa" inactiveColor="#2d3240" height="8"
							:showText="false"></uv-line-progress>
					</view>
				</view>
			</view>
			<view class="stat_line">
				<view class="space_between">
					<view style="width: 32%;">
						<view class="stat_title_circle">SO2</view>
						<view class="stat_title_gray">HWSEFSASF</view>
					</view>
					<view style="flex: 1;">
						<uv-line-progress :percentage="60" activeColor="#8bfa03" inactiveColor="#2d3240" height="8"
							:showText="false"></uv-line-progress>
					</view>
				</view>
			</view>
			<view class="stat_line">
				<view class="space_between">
					<view style="width: 32%;">
						<view class="stat_title_circle">SO5</view>
						<view class="stat_title_gray">HWSEFSASF</view>
					</view>
					<view style="flex: 1;">
						<uv-line-progress :percentage="30" activeColor="#fbfb03" inactiveColor="#2d3240" height="8"
							:showText="false"></uv-line-progress>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onLaunch, onShow, onHide } from "@dcloudio/uni-app";
	import { ref } from 'vue'
	const title = ref('Hello')
	const map : any = {
		'区域名称1': 1048,
		'区域名称2': 735,
		'区域名称3': 580,
		'区域名称4': 484,
		'区域名称5': 300,
		'区域名称6': 890,
	}
	let total = 0
	for (const mapKey in map) {
		total += map[mapKey]
	}
	const statOption = ref({
		title: {
			text: '增长分布',
			x: '3%',
			y: '4%',
			textStyle: {
				color: "#ffffff",
				fontSize: 14,
			},
		},
		tooltip: {
			trigger: 'item',
		},
		legend: [{
			data: ['区域名称1', '区域名称2', '区域名称3'],
			top: 'center',
			left: '37%',
			orient: 'vertical',
			icon: 'circle',
			itemGap: 20,
			itemHeight: 10,
			formatter: (name : any) => {
				return [
					`{a|${(map[name] / total * 100).toFixed(2)}%}`,
					`{b|${name}}`,
				].join('\n')
			},
			textStyle: {
				rich: {
					a: {
						color: '#fff',
						fontSize: '12px',
						lineHeight: 20,
					},
					b: {
						color: '#fff',
						fontSize: '12px',
					},
				},
			},
		},
		{
			data: ['区域名称4', '区域名称5', '区域名称6'],
			top: 'center',
			left: '68%',
			orient: 'vertical',
			icon: 'circle',
			itemGap: 20,
			itemHeight: 10,
			formatter: (name : any) => {
				return [
					`{a|${(map[name] / total * 100).toFixed(2)}%}`,
					`{b|${name}}`,
				].join('\n')
			},
			textStyle: {
				rich: {
					a: {
						color: '#fff',
						fontSize: '12px',
						lineHeight: 20,
					},
					b: {
						color: '#fff',
						fontSize: '12px',
					},
				},
			},
		},
		],
		series: [
			{
				name: '区域',
				type: 'pie',
				radius: ['35%', '46%'],
				center: ['20%', '50%'],
				left: 0,
				avoidLabelOverlap: false,
				label: {
					show: false,
					position: 'center',
				},
				labelLine: {
					show: false,
				},
				data: [
					{ value: 1048, name: '区域名称1' },
					{ value: 735, name: '区域名称2' },
					{ value: 580, name: '区域名称3' },
					{ value: 484, name: '区域名称4' },
					{ value: 300, name: '区域名称5' },
					{ value: 890, name: '区域名称6' },
				],
			},
		],
	})
	let yAxisData = ['08-03', '08-04', '08-05', '08-06', '08-07', '08-08', '08-09', '08-10', '08-11', '08-12', '08-13', '08-14']
	let data = [100, 90, 200, 250, 240, 220, 120, 390, 480, 270, 290, 200]
	const chartOption = ref({
		title: {
			text: '增长趋势',
			x: '3%',
			y: '4%',
			textStyle: {
				color: "#ffffff",
				fontSize: 14,
			},
		},
		grid: {
			bottom: '15%',
			left: '12%',
			top: '20%',
			right: '5%',
		},
		xAxis: {
			type: 'category',
			boundaryGap: true,
			axisTick: {
				show: false
			},
			axisLine: {
				lineStyle: {
					color: '#94A7BD'//轴线和单位颜色
				}
			},
			data: yAxisData
		},
		yAxis: {
			type: 'value',
			name: '',
			nameTextStyle: {
				fontSize: 14,
				color: '#94A7BD',
				padding: [0, 0, 0, -45],
			},
			axisLine: {
				lineStyle: {
					color: '#94A7BD'//轴线和单位颜色
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#182D46',
					type: [2, 3],
					dashOffset: 2
				}
			}
		},
		series: [{
			name: '数据',
			type: 'line',
			symbol: 'none',
			smooth: true,
			areaStyle: {
				color: {
					type: 'linear', x: 0, y: 0, x2: 0, y2: 1,
					colorStops: [{
						offset: 0, color: 'rgba(54,161,255,0.6)' // 0% 处的颜色
					}, {
						offset: 1, color: 'rgba(25,104,255,0)' // 100% 处的颜色
					}],
					global: false // 缺省为 false
				},
			},
			lineStyle: {
				color: '#2695FE',
				width: 2,
				type: 'solid'
			},
			// 最高点标点
			data: data.map(item => {
				const maxValue = Math.max(...data)

				if (item === maxValue) {
					return {
						value: item,
						symbol: 'circle',
						symbolSize: 8,
						itemStyle: { color: '#fff', shadowColor: 'rgba(255,255,255,0.6)', shadowBlur: 10 }
					}
				}

				return item
			})
		}]
	});
	onShow(() => {
	})
</script>

<style lang="scss" scoped>
	.stat_echart_box {
		width: calc(100% - 60rpx);
		margin: 30rpx 30rpx 0rpx 30rpx;
		height: 400rpx;
		border-radius: 30rpx;
		background-color: rgba(85, 110, 143, .3);
	}

	.stat_box_line {
		width: calc(100% - 60rpx);
		margin: 30rpx 30rpx 0rpx 30rpx;
		padding: 10rpx 0rpx;
		border-radius: 30rpx;
		background-color: rgba(85, 110, 143, .3);
	}

	.stat_line {
		padding: 20rpx 30rpx;
	}

	.stat_title_circle {
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		padding-left: 35rpx;
		position: relative;
	}

	.stat_title_circle::before {
		content: '';
		position: absolute;
		top: 15rpx;
		left: 0rpx;
		width: 15rpx;
		height: 15rpx;
		background-color: #fff;
		border-radius: 50%;
	}

	.stat_title_gray {
		color: #909399;
		font-size: 26rpx;
		margin-top: 4rpx;
		padding-left: 35rpx;
	}
</style>