smartmeter-app/pages/tj.vue

<template>
	<view class="page">
		<div class="title">
			统计
		</div>
		<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>
		
		<tab-bar :indexs='1'></tab-bar>
	</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 {

			}
		},
		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 waveData = this.generateWaveData(10);
			const option = {
			  grid: {
			    left: 10,
			    right: 10,
			    top: 10,
			    bottom: 30,
			    // containLabel: true,
			  },
			  xAxis: {
			    type: 'category',
			    boundaryGap: false,
			    axisLine: {
			      show: false, // 隐藏轴线
			    },
			    axisTick: {
			      show: false, // 隐藏刻度
			    },
			    axisLabel: {
			      show: true,
			      color: '#fff', // x轴标签文字颜色
			      fontSize: 11, // x轴标签文字大小
			      rotate: 90, // 逆时针旋转180°
			    },
			    splitLine: {
			      show: false, // 隐藏分隔线
			    },
			    data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'], // 数据项
			  },
			  yAxis: {
			    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: [200, 560, 3000, 580, 250, 300, 450],
			    },
			  ],
			};

				// 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;
			}
		}
	}
</style>