解决在 element 的＜el-tabs＞ ＜el-tab-pane＞ 标签中使用echart图表设置宽度100%，结果显示100px问题

参考：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>

解决

1. 在 index.vue 页面中的 ScoreChart 标签中通过props 传入 el-tab-pane 标签的 name属性值，即 父标签 el-tabs 中绑定的 activeName 值
   

2. 在 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>