我是引入了两个图表组件，大体和非2.0版本差不多，结论：根据变量显示图表数据，子组件2（1和2一样就是保存数据字段不一样以及多了图表居中）
看代码-父组件
html
<el-tab-pane label="饼状图" name="second">
<el-row :gutter="1">
<el-col :span="12">
<vab-chart-pie title="来源渠道饼状图" :pieData="pieData" v-if="chartDataIsReady" :titleTab="tabName" />
</el-col>
<el-col :span="12">
<vab-chart-ses title="会话次数饼状图" :sessionPieData="sessionPieData" v-if="chartDataIsReady" :titleTab="tabName" />
</el-col>
</el-row>
</el-tab-pane>
import VabChartPie from '../compoents/VabChartPie.vue'
import VabChartSes from '../compoents/VabChartSes.vue'
export default {
name: 'InlineEditTable',
components: {
selects,
VabChartPie,
VabChartSes
},
data() {
return {
activeName: 'first',
tabName: '', //子组件需监听切换
chartDataIsReady: false, //确保有数据时渲染dom
pieData: {
//子组件中需要用到的数组
lineData: [],
SearData: [],
},
sessionPieData: {
//子组件2中需要用到的数组
lineData: [],
SearData: [],
},
async mounted() {
await this.fetchDataPie()
},
//获取饼图数据
fetchDataPie() {
getListPieSource().then((res) => {
// 将对象转换为数组对象
const arr = Object.keys(res).map(key => ({
name: key,
value: res[key]
}));
this.pieData.SearData = arr
// 使用 Object.keys() 方法获取对象的键
this.pieData.lineData = Object.keys(res);
this.tabName = "second"
// console.log('父1---',this.pieData)
})
getListPieCount().then((res) => {
// 将对象转换为数组对象
const arr = Object.keys(res).map(key => ({
name: key,
value: res[key]
}));
this.sessionPieData.SearData = arr
this.sessionPieData.lineData = Object.keys(res);
this.tabName = "third"
// console.log('父2---',this.sessionPieData)
})
this.chartDataIsReady = true;
},子组件1
html
<template>
<!-- <el-col :lg="8" :md="12" :sm="24" :xl="6" :xs="24"> -->
<!-- <el-col :span="12"> -->
<el-card shadow="hover">
<template #header>
<span>{{ title }}</span>
</template>
<vab-chart ref="pieChart" theme="vab-echarts-theme" :init-options="initOptions" :option="option" />
</el-card>
<!-- </el-col> -->
</template>
<script>
import VabChart from '@/extra/VabChart'
// import Echarts from 'echarts';
export default {
name: 'VabChartPie',
components: {
VabChart,
},
props: {
titleTab: {
type: String,
default: '',
},
title: {
type: String,
default: '',
},
pieData: {
type: Object,
// required: true, // 这个prop是必须的
// default: () => ({}) // 提供一个默认值，如果父组件没有传递Data
},
// sessionPieData: {
// type: Object,
// },
},
data() {
return {
newData: {},
initOptions: {
renderer: 'svg',
},
option: {}
}
},
created() {
},
mounted() {},
watch: {
titleTab(newActiveName) {
// if (newActiveName === 'third') {
// this.newData = this.sessionPieData
// this.initPieChart2();
// } else {
// this.newData = this.pieData
// this.initPieChart();
// }
if(newActiveName==='second'){
// this.initPieChart2();
this.initPieChart();
}
}
},
methods: {
initPieChart() {
this.newData = this.pieData
console.log('子1------');
console.log(this.pieData);
this.option = {
tooltip: {
trigger: 'item'
},
// legend: {
// bottom: '20%',
// icon: 'circle',
// orient: 'vertical',
// left: '85%',
// textStyle: {
// color: '#333',
// fontSize: 20
// },
// data:this.newData.lineData,
// },
series: [{
// name: '访问来源',
type: 'pie',
radius: '55%',
data: this.newData.SearData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
},
initPieChart2() {
this.newData = this.sessionPieData
console.log('子2------');
console.log(this.sessionPieData);
this.option = {
tooltip: {
trigger: 'item'
},
series: [{
// name: '访问来源',
type: 'pie',
radius: '55%',
data: this.newData.SearData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
},
}
}
</script>子组件2（1和2一样就是保存数据字段不一样）
html
<template>
<el-card shadow="hover">
<template #header>
<span>{{ title }}</span>
</template>
<vab-chart ref="sesChart" theme="vab-echarts-theme" :init-options="initOptions" :option="option" />
</el-card>
</template>
<script>
import VabChart from '@/extra/VabChart'
export default {
name: 'VabChartSes',
components: {
VabChart,
},
props: {
titleTab: {
type: String,
default: '',
},
title: {
type: String,
default: '',
},
sessionPieData: {
type: Object,
},
},
data() {
return {
newData: {},
initOptions: {
renderer: 'svg',
},
option: {}
}
},
created() {
},
mounted() {},
watch: {
titleTab(newActiveName) {
if(newActiveName==='third'){
this.initsesChart();
}
}
},
methods: {
initsesChart() {
this.newData = this.sessionPieData
console.log('子2------');
console.log(this.sessionPieData);
this.option = {
tooltip: {
trigger: 'item'
},
series: [{
// name: '访问来源',
type: 'pie',
radius: '55%',
data: this.newData.SearData,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
},
}
}
</script>
<style>
/* 可以添加一些额外的样式来确保vab-chart的容器有足够的空间居中 */
.el-card__body {
width: 100%; /* 或者您想要的特定宽度 */
height: 100%; /* 或者您想要的特定高度 */
display: flex;
justify-content: center;
align-items: center;
}
</style>