read_opc/reado-app/pages/homePage/index.vue

<template>
	<view>
		<view v-if="echartsType==='pie'">
			<view class="title" v-if="echartsData">
				{{echartsData.chartName}}
			</view>
			<pieEcharts :echartsData="echartsData" />
		</view>
		<view v-if="echartsType==='bar'">
			<view class="title" v-if="echartsData">
				{{echartsData.chartName}}
			</view>
			<barEcharts :echartsData="echartsData" />
		</view>
		<view v-if="echartsType==='line'">
			<view class="title" v-if="echartsData">
				{{echartsData.chartName}}
			</view>
			<lineEcharts :echartsData="echartsData" v-if="echartsData" />
		</view>
		<u-empty text="暂无数据" icon="../../static/data.png" v-if="!echartsData"></u-empty>
	</view>
</template>

<script>
	import lineEcharts from '../../components/ecahrts/line-echarts.vue'
	import pieEcharts from '../../components/ecahrts/pie-echarts.vue'
	import barEcharts from '../../components/ecahrts/bar-echarts.vue'
	export default {
		components: {
			lineEcharts,
			pieEcharts,
			barEcharts
		},
		data() {
			return {
				queryParams: {
					page: 1,
					limit: 999
				},
				//图表数据
				echartsData: null,
				//图表类型
				echartsType: null
			}
		},
		onShow() {
			this.temperature()
		},
		methods: {
			//用户图表数据
			temperature() {
				uni.$http.get('/chart/getAllOkChart', this.queryParams).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.getChartData(data.data.reportTableList[0].id)
					}
				})
			},
			getChartData(id) {
				uni.$http.get('/chart/getChartById', {
					id: id
				}).then(res => {
					const data = res.data
					if (data.code === 200) {
						this.echartsData = data.data
						this.echartsType = data.data.chartType
					}
				})
			}
		}
	};
</script>

<style scoped>
	.title {
		margin-left: 24rpx;
		font-size: 36rpx;
		color: #666666;
	}
</style>