vue3.0 父组件显示子组件中的echarts，同时保证宽高自适应。

目录

• vue3.0 父组件显示子组件中的echarts，同时保证宽高自适应。
  • el-card控件中的echarts进行填充布局
• 示例代码

vue3.0 父组件显示子组件中的echarts，同时保证宽高自适应。

父组件显示echarts子组件，实现原理如下：echarts的数据是在渲染时候加载的，所以最简单的办法就是所有图标数据拿到以后，利用v-if进行渲染。

核心代码如下：v-if="isInit" state.isInit = true

复制<LearnAnalysis class="learn-analysis" ref="analysisRef" v-if="isInit" :pieChartDatas="pieChartDatas"
:barChartDatas="barChartDatas">
</LearnAnalysis>

const GetAllLearnBehaviors = () => {
    //根据token 内保存的用户id 查询登录用户的所有学习记录
    axios.get('/learnbehavior/LearnBehavior/piechartdata?id=*******')
        .then((res) => {
        //饼图数据				
        res.data.forEach(item => {
            let data = { value: '', name: '' }
            data.value = item.value
            data.name = item.key
            state.pieChartDatas.push(data)
        });

        //条形图数据
        res.data.forEach(item => {
            state.barChartDatas.xData.push(item.key)
            state.barChartDatas.yData.push(item.value)
        })
        state.isInit = true
    })
        .catch()
}

el-card控件中的echarts进行填充布局

通过修改el-card的body样式来实现。核心代码如下：

.el-card ::v-deep .el-card__body {    
	height: 100%;
	width: 100%;
}

示例代码

子组件1

<template>
	<div class="echarts-header">
		<div ref="pieChartRef" style="width: 50%;height: 100%;"></div>
		<div ref="barChartRef" style="width: 50%;height: 100%;"></div>
	</div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch } from 'vue'
import * as echarts from "echarts";

export default {
	name: 'LearnAnalysis',
	props: {
		pieChartDatas: Array,
		barChartDatas: Object,
	},
	setup (props) {
		const pieChartRef = ref(null)
		const barChartRef = ref(null)
		const state = reactive({
			pieChart: {},
			barChart: {},
			pieChartDatas: [],
			barChartDatas: {},
			chartDatas: [],
			isLearn: '',
			behaviorCategory: '',
			behaviorDescription: '',
			startTime: '',
			endTime: ''
		})

		//初始化扇形图
		const initPieChart = () => {
			// 基于准备好的dom，初始化echarts实例
			state.pieChart = echarts.init(pieChartRef.value);
			// 指定图表的配置项和数据
			let option = {
				title: {
					text: '学习情况统计分析',
					subtext: '学习情况分布分析',
					left: 'center'
				},
				tooltip: {
					trigger: 'item'
				},
				legend: {
					orient: 'vertical',
					left: 'left'
				},
				series: [
					{
						name: '学习占比',
						type: 'pie',
						radius: '50%',
						data: props.pieChartDatas,
						//重点
						label: {
							normal: {
								formatter: '{b}:{c}: ({d}%)',
								textStyle: {
									fontWeight: 'normal',
									fontSize: 15
								}
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			};

			// 使用刚指定的配置项和数据显示图表。
			state.pieChart.setOption(option);
		}
		//初始化条形图
		const initbarChart = () => {
			state.barChart = echarts.init(barChartRef.value)
			let option = {
				title: {
					text: '学习情况统计分析',
					subtext: '学习情况数据统计',
					left: 'center'
				},
				xAxis: {
					type: 'category',
					data: props.barChartDatas.xData
				},
				yAxis: {
					type: 'value'
				},
				series: [
					{
						data: props.barChartDatas.yData,
						type: 'bar',
						showBackground: true,
						backgroundStyle: {
							color: 'rgba(180, 180, 180, 0.2)'
						}
					}
				]
			}
			// 使用刚指定的配置项和数据显示图表。
			state.barChart.setOption(option);
		}

		const reload = () => {
			initPieChart()
			initbarChart()
		}

		onMounted(() => {
			reload()
		})

		return {
			...toRefs(state),
			pieChartRef,
			barChartRef,
			initPieChart,
			initbarChart,
			reload
		}
	},
}
</script>
<style scoped>
.echarts-header {
	display: flex;
	flex-direction: row;
	align-items: stretch;
}
</style>

子组件2

<template>
	<div >
		<!--学习分析 content区域 显示所有类型的统计-->
		<div ref="barChartRef" id="barChart" style="width: 100%;height:100%;"></div>
	</div>

	

</template>
<script>
import { ref, toRefs, onMounted } from 'vue'
import * as echarts from "echarts";

export default {
	name: 'LearnBehaviorList',
	props: {
		barChartDatas: Object,
	},
	setup (props) {
		const barChartRef = ref(null)
		const state = {
			catHeader: ''
		}

		//初始化分析图标数据
		const initbarChart = () => {
			// 基于准备好的dom，初始化echarts实例
			let myChart = echarts.init(barChartRef.value);
			// 指定图表的配置项和数据
			let option = {
				title: [
					{
						text: '学习进度监控'
					}
				],
				polar: {
					radius: [30, '80%']
				},
				angleAxis: {
					max: 10,
					startAngle: 75
				},
				radiusAxis: {
					type: 'category',
					data: props.barChartDatas.xData
				},
				tooltip: {},
				series: {
					type: 'bar',
					data: props.barChartDatas.yData,
					coordinateSystem: 'polar',
					label: {
						show: true,
						position: 'middle',
						formatter: '{b}: {c}'
					}
				}
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		}

		onMounted(() => {
			initbarChart()
		})

		return {
			...toRefs(state),
			barChartRef,
			initbarChart,
		}
	}
}
</script>

父组件

<!--
 * @Author: AJun
 * @Date: 2022-12-06 14:57:59
 * @LastEditors: AJun
 * @LastEditTime: 2022-12-08 18:16:47
 * @Description: 学习行为 学习进度监控 学习情况统计分析
 * Copyright (c) 2022 by 正禾智通科技有限公司, All Rights Reserved. 
-->
<template >

	<el-card class="learn-topcard">
	
			<LearnAnalysis class="learn-analysis" ref="analysisRef" v-if="isInit" :pieChartDatas="pieChartDatas"
			:barChartDatas="barChartDatas">
		</LearnAnalysis>

		<!-- <h2>统计分析</h2> -->

	</el-card>

	<el-card class="learn-bottomcard">
		<!-- <h2>进度监控</h2> -->
		<LearnBehaviorList class="learn-behavior" ref="behaviorRef" v-if="isInit" :barChartDatas="barChartDatas">
		</LearnBehaviorList>
	</el-card>


</template>
<script>
import LearnBehaviorList from '../components/LearnBehaviorList.vue';
import LearnAnalysis from '../components/LearnAnalysis.vue';
import { ref, reactive, toRefs, onMounted } from 'vue'
import axios from 'axios';
export default {
	components: { LearnBehaviorList, LearnAnalysis },

	setup () {
		const analysisRef = ref(null)
		const barChartRef = ref(null)
		const state = reactive({
			pieChartDatas: [],
			barChartDatas: {
				xData: [],
				yData: []
			},
			isInit: false,
		})

		//获取所有的学习行为数据
		const GetAllLearnBehaviors = () => {			
			axios.get('/learnbehavior/LearnBehavior/piechartdata?id=****')
				.then((res) => {
					//饼图数据				
					res.data.forEach(item => {
						let data = { value: '', name: '' }
						data.value = item.value
						data.name = item.key
						state.pieChartDatas.push(data)
					});

					//条形图数据
					res.data.forEach(item => {
						state.barChartDatas.xData.push(item.key)
						state.barChartDatas.yData.push(item.value)
					})
					state.isInit = true
				})
				.catch()
		}

		//加载所有数据
		const reload = () => {
			GetAllLearnBehaviors()
		}

		onMounted(() => {
			reload()
		})


		return {
			...toRefs(state),
			analysisRef,
			barChartRef,
		}
	}
}

</script>
<style scoped>
.learn-topcard {
	margin-top: 20px;
	height: 48%;
	width: 100%;
}
.el-card ::v-deep .el-card__body {    
	height: 100%;
	width: 100%;
}

.learn-analysis {		
	height: 100%;
}

.learn-bottomcard {
	margin-top: 20px;	
	height: 48%;
	width: 100%;
}

.learn-behavior {	
	height: 100%;	
}
</style>