vue项目中在同一页面多次引入同一个echarts图表子组件的自适应问题

 在父组件页面引入两次该图表子组件显示的效果：

    

 由于是百分比宽高，所以在窗口发生变化时，需要让图表也跟着自适应，所以才出现了本次讨论的问题啦。

 先看下完整的图表子组件代码（在父组件就是直接引入，不需要传参哦）：

<template>
    <div ref="pieDom" style="width: 100%;height: 100%;"></div>
</template>

<script>
    export default {
        data () {
            return {
                pieEcharts: "",
                pieOption: {},
                datas: [],
                hideColor: '#6f76ac'
            }
        },
        mounted() {
            this.datas = [
                {
                    value: 20,
                    name: "25%"
                },
                {
                    value: 80,
                    name: "75%"
                }
            ];

            this.pieEcharts = this.$echarts.init( this.$refs.pieDom );
            this.setPieOption();
            this.setPieEvents();
        },
        methods: {
            setPieOption(){
                this.pieOption = {
                    color: ['#ff106e', this.hideColor],   //环形的分段色值设置
                    tooltip: {
                        trigger: 'item',
                        position: (point, params, dom, rect, size)=> {
                            return [point[0], point[1]];
                        },
                    },
                    series: [{
                        type: 'pie',
                        radius: ['60%', '80%'], //内存 、外层
                        avoidLabelOverlap: false,
                        hoverAnimation: true,
                        hoverOffset: 2,
                        label: {
                            normal: {
                                show: false, //中间的标签
                                position: 'center',
                                textStyle: {
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '20',
                                    fontWeight: 'bold'
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        selectedOffset: 0,
                        itemStyle: {
                            emphasis: {
                                
                            },
                        },
                        data: this.datas
                    }]
                };
                // 渲染图表
                this.pieEcharts.setOption( this.pieOption );
            },
            /**
             * 设置图表的事件
             */
            setPieEvents(){
                /**
                 * 刷新时默认显示第一条
                 */
                this.pieEcharts.dispatchAction(
                    {
                        type: 'highlight',
                        seriesIndex: 0,
                        dataIndex: 0
                    }
                );
                /**
                 * 鼠标移入图表时，不为第一条时就取消第一条的高亮效果
                 */
                this.pieEcharts.on('mouseover',(v) => {
                    if(v.dataIndex != 0){
                        this.pieEcharts.dispatchAction({
                            type: 'downplay',
                            seriesIndex: 0,
                            dataIndex: 0
                        });
                    }
                });
                /**
                 * 鼠标图表时默认显示第一条
                 */
                this.pieEcharts.on('mouseout',(v) => {
                    this.pieEcharts.dispatchAction(
                        {
                            type: 'highlight',
                            seriesIndex: 0,
                            dataIndex: 0
                        }
                    );
                });
                // 监听窗口变化 - 只刷新最后一个图表
                window.onresize = ()=> {
                    this.pieEcharts.resize();
                }

                // 监听窗口变化 - 多个图表同时刷新
                window.addEventListener('resize', ()=> {
                    this.pieEcharts.resize();
                })
            },
        }
    }
</script>

<style scoped>
    
</style>

窗口改变时图表自适应代码在最后，这里分别提出来做说明：

1. 只刷新最后一个图表的情况：（第二种情况的代码记得注释！）

                // 监听窗口变化 - 只刷新最后一个图表
                window.onresize = ()=> {
                    this.pieEcharts.resize();
                }

   

可以看到，只有第二个才发生了变化，而且会自动居中和适应大小

 

 2. 多个图表同时刷新的情况：

                // 监听窗口变化 - 多个图表同时刷新
                window.addEventListener('resize', ()=> {
                    this.pieEcharts.resize();
                })

    

两个同时变化了哦!

 

但是为什么两个监听方法会有这样不同的效果呢？？？ 这个有空的时候再研究。。。知道的朋友可以留言告诉我哦，万分感谢

 

转载于:https://www.cnblogs.com/stella1024/p/10429967.html