smartmeter-app/pages/shebei/eletj.vue

<template>
	<view class="page">
		<u-navbar  title="用电分析" :border-bottom="false" :background="bgc" title-color='#2E4975'
			title-size='36' height='36' id="navbar"></u-navbar>
		<div class="card">
			<view class="month">
				2024年01月
			</view>
			<view class="tit">
				本月用电量（度）
			</view>
			<div class="txt">
				25.36
			</div>
			<view class="echarts">

				<!-- <mpvue-echarts id="main" ref="pieChart" :echarts="echarts" @onInit="initChart" /> -->
				<l-echart ref="chart" @finished="initChart"></l-echart>
			</view>
		</div>
		<view class="list">
			<view class="card_list">
				<view class="left">
					2023年04月
				</view>
				<view class="right">
					5.30 度
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import * as echarts from 'echarts'
	import LEchart from '@/uni_modules/lime-echart/components/l-echart/l-echart.vue';
	export default {
		components: {
			LEchart
		},
		data() {
			return {
				bgc: {
					backgroundColor: "#F7FAFE",
				},
			}
		},
		onLoad() {
			// setTimeout(() => {

			// 			this.initChart()		
			// }, 300);
			// this.initChart()
		},
		methods: {
			generateWaveData(length) {
				const data = [];
				for (let i = 0; i < length; i++) {
					const y = Math.sin((i / (length - 1)) * Math.PI * 2); // 正弦函数生成波浪形状的y值
					data.push((y + 1) * 50); // 映射到0-100的范围
				}
				return data;
			},
			async initChart() {
				console.log('111111');
				// let _this = this
				
		const option = {
		    grid: {
		        left: 50,
		        right: 10,
		        top: 10,
		        bottom: 30,
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: false,
		        axisLine: {
		            show: false,
		        },
		        axisTick: {
		            show: false,
		        },
		        axisLabel: {
		            show: true,
		            color: '#fff',
		            fontSize: 11,
		            rotate: 0,
		        },
		        splitLine: {
		            show: false,
		        },
		        data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
		    },
		    yAxis: {
		        show: true,
		        axisLine: {
		            show: false,
		        },
		        axisTick: {
		            show: false,
		        },
		        axisLabel: {
		            show: true,
		            color: '#fff',
		            fontSize: 11,
		            formatter: function (value) {
		                // 保留两位小数，没有小数时显示00
		                return value+'.00'+ '度'
		            },
		        },
		        splitLine: {
		            show: false,
		        },
		    },
		    visualMap: {
		        type: 'piecewise',
		        show: false,
		        dimension: 0,
		        seriesIndex: 0,
		        pieces: [{
		                gt: 1,
		                lt: 3,
		                color: 'rgba(0, 0, 180, 0.4)',
		            },
		            {
		                gt: 5,
		                lt: 7,
		                color: 'rgba(0, 0, 180, 0.4)',
		            },
		        ],
		    },
		    series: [{
		        type: 'line',
		        smooth: 0.6,
		        symbol: 'none',
		        lineStyle: {
		            color: '#E0DBFF',
		            width: 4,
		        },
		        areaStyle: {
		            normal: {
		                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
		                    offset: 0,
		                    color: '#B4B0F7'
		                }, ]),
		            },
		        },
		        data: [20.00, 56.00, 30.00, 58.00, 25.00, 30.00, 45.00],
		    }],
		};
				// console.log( this.$refs.chartRef,'1111');
				const chart = await this.$refs.chart.init(echarts);
				console.log(option);
				chart.setOption(option)
				return chart
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7FAFE;
	}

	.page {
		padding: 0 59rpx;

		.title {
			margin-top: 170rpx;
			font-size: 48rpx;
			font-weight: 400;
			letter-spacing: 0rpx;

			color: rgba(38, 43, 55, 1);
		}

		.card {
			padding-top: 32rpx;
			margin-top: 66rpx;
			width: 632rpx;
			height: 586rpx;
			background: #8883F0;
			box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
			opacity: 1;
			// filter: blur(0px);
			border-radius: 40rpx;

			.month {

				margin-left: 22rpx;
				font-size: 28rpx;
				font-family: Source Han Sans, Source Han Sans;
				font-weight: 400;
				color: #FFFFFF;
			}

			.tit {
				margin-top: 18rpx;
				margin-left: 22rpx;
				font-size: 20rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 400;
				color: #FFFFFF;

			}

			.txt {
				margin-top: 2rpx;
				margin-left: 22rpx;
				font-size: 36rpx;
				font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
				font-weight: 700;
				color: #FFFFFF;
			}

			.echarts {
				margin-left: 22rpx;
				margin-top: 60rpx;
				// width: 100%;
				// height: 80%;
				width: 588rpx;
				height: 320rpx;
			}
		}

		.list {
			margin-top: 16rpx;

			.card_list {
				width: 632rpx;
				height: 88rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 16rpx 40rpx 0rpx rgba(42, 130, 228, 0.1);
				opacity: 1;
				border-radius: 30rpx;
				display: flex;
				flex-wrap: nowrap;
				justify-content: space-between;
				margin-top: 16rpx;
				align-items: center;

				.left {
					margin-left: 52rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #808080;
				}

				.right {
					margin-right: 20rpx;
					font-size: 28rpx;
					font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
					font-weight: 400;
					color: #808080;
				}
			}
		}
	}
</style>