目录
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>