参考:https://blog.csdn.net/qq_45949366/article/details/107861363
问题
在 element 的 <el-tabs> <el-tab-pane>
标签中使用echart图表时,图表宽度设置为 width: 100%,但是渲染出来的宽度变为 width:100px, %
变成了 px
二、关键代码
index.vue
页面中使用 <el-tab-pane>
标签, 并引入echart
图表组件页面放到该标签中
<template>
<el-tabs v-model="activeName" @tab-click="handleTabChange" style="font-size: 22px;">
<el-tab-pane label="完成实训学生列表" name="studentList"></el-tab-pane>
<el-tab-pane label="数据统计图表" name="eChart">
<div style="width: 100%;">
<ScoreChart />
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import ScoreChart from './score.vue'
export default {
components: {
ScoreChart
},
data() {
return {
activeName: 'eChart', // el-tab-pane 标签的 name 属性值
}
},
}
</script>
score.vue
echart 图表页面
<template>
<div ref="ScorePieChart" class="chart"></div>
</template>
<script>
const echarts = require("echarts");
export default {
data() {
return {
scoreECharts: "",
//成绩图表
scoreOption: {
title: {
text: '各分数段人数占比统计',
left: 'center'
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 100,
top: 20,
bottom: 20,
data: ["小于60分", "60-69分", "70-79分", "80-89分", "90-100分"]
},
series: [
{
name: '成绩',
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
data: [
{ value: 0, name: '小于60分' },
{ value: 0, name: '60-69分' },
{ value: 0, name: '70-79分' },
{ value: 0, name: '80-89分' },
{ value: 0, name: '90-100分' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
}
}, methods: {
/** 成绩图表 */
handleScoreECharts() {
// 基于准备好的dom,初始化echarts实例
this.scoreECharts = echarts.init(this.$refs.ScorePieChart);
// 绘制图形
this.scoreECharts.setOption(this.scoreOption, true);
//动态监听浏览器大小变化,重新绘制 echarts 图形
window.addEventListener('resize', () => {
this.scoreECharts.resize();
})
},
},
mounted() {
this.handleScoreECharts();
},
}
</script>
<style>
.chart {
width: 100%;
height: 300px;
}
</style>
解决
-
在
index.vue
页面中的ScoreChart
标签中通过props
传入el-tab-pane
标签的name
属性值,即 父标签el-tabs
中绑定的activeName
值
-
在
score.vue
图表页面中用props
接收activeName
并监听,当activeName
发生变化时调用echart
的resize()
方法重新绘制图表
最终效果
完整解决代码
index.vue
<template>
<el-tabs v-model="activeName" @tab-click="handleTabChange" style="font-size: 22px;">
<el-tab-pane label="完成实训学生列表" name="studentList"></el-tab-pane>
<el-tab-pane label="数据统计图表" name="eChart">
<div style="width: 100%;">
<ScoreChart :activeName="activeName" />
</div>
</el-tab-pane>
</el-tabs>
</template>
<script>
import ScoreChart from './chart/score'
export default {
components: {
ScoreChart
},
data() {
return {
activeName: 'eChart', // el-tab-pane 标签的 name 属性值
}
},
}
</script>
score.vue
<template>
<div ref="ScorePieChart" class="chart"></div>
</template>
<script>
const echarts = require("echarts");
export default {
props: ['activeName'],
data() {
return {
scoreECharts: "",
//成绩图表
scoreOption: {
title: {
text: '各分数段人数占比统计',
left: 'center'
},
legend: {
type: 'scroll',
orient: 'vertical',
left: 100,
top: 20,
bottom: 20,
data: ["小于60分", "60-69分", "70-79分", "80-89分", "90-100分"]
},
series: [
{
name: '成绩',
type: 'pie',
radius: '50%',
center: ['50%', '50%'],
data: [
{ value: 0, name: '小于60分' },
{ value: 0, name: '60-69分' },
{ value: 0, name: '70-79分' },
{ value: 0, name: '80-89分' },
{ value: 0, name: '90-100分' },
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
},
}
},
methods: {
/** 成绩图表 */
handleScoreECharts() {
// 基于准备好的dom,初始化echarts实例
this.scoreECharts = echarts.init(this.$refs.ScorePieChart);
// 绘制图形
this.scoreECharts.setOption(this.scoreOption, true);
//动态监听浏览器大小变化,重新绘制 echarts 图形
window.addEventListener('resize', () => {
this.scoreECharts.resize();
})
},
},
mounted() {
this.handleScoreECharts();
},
watch: {
activeName(){
this.scoreECharts.resize();
}
},
}
</script>
<style>
.chart {
width: 100%;
height: 300px;
}
</style>