vue3.0 父元件顯示子元件中的echarts，同時保證寬高自適應。
阿新 • • 發佈：2022-12-08
目錄
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>