vue2和vue3中解决echarts不跟随窗口和当前容器的尺寸变化而变化的问题

素质白嫖怪

已于 2023-06-27 11:14:04 修改

阅读量1.9k

点赞数 2

CC 4.0 BY-SA版权

文章标签： echarts 前端 javascript

于 2023-06-27 11:08:45 首次发布

本文链接：https://blog.csdn.net/Working_hard_111/article/details/131412543

公共操作：

引入插件

npm install element-resize-detector --save

在页面中引用该插件

import elementResizeDetectorMaker from "element-resize-detector";

Vue2部分：

将echarts渲染出来，以官网例子举例：

var chartDom = document.getElementById('echartsBox'); //容器名字
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                        {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
            option && myChart.setOption(option);

若要实现在页面中整体放大时，图表也跟着等比例放大，如在浏览器中按F11全屏时，加入下方代码

//点击F11时，echarts图表跟随屏幕的大小变化而变化
            window.addEventListener('resize', function () {
                myChart.resize();
            });

若要实现在页面中跟随当前容器的大小变化时，图表有跟着等比例放大，如当前容器的宽高占比可能为动态数值时，加入下方代码

//根据当前容器的尺寸变化而让图表也跟着变化
            let changeSize = elementResizeDetectorMaker()
            let _this = this
            changeSize.listenTo(chartDom,() => {  //chartDom为之前获取到的容器名
                _this.$nextTick(() => {
                    myChart.resize()
                })
            })

Vue2完整代码呈现：

<template>
    <div id="echartsBox">
    </div>
</template>
<script>
import * as echarts from 'echarts';
import elementResizeDetectorMaker from "element-resize-detector";
export default{
    data(){
        return{
        }
    },
    methods:{
        initEcharts(){
            var chartDom = document.getElementById('echartsBox'); //容器名字
            var myChart = echarts.init(chartDom);
            var option;

            option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                        {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
            option && myChart.setOption(option);

            //点击F11时，echarts图表跟随屏幕的大小变化而变化
            window.addEventListener('resize', function () {
                myChart.resize();
            });

            //根据当前容器的尺寸变化而让图表也跟着变化
            let changeSize = elementResizeDetectorMaker()
            let _this = this
            changeSize.listenTo(chartDom,() => {  //chartDom为之前获取到的容器名
                _this.$nextTick(() => {
                    myChart.resize()
                })
            })
        }
    },
    mounted(){
        this.initEcharts()
    }
}
</script>

<style lang="scss" scoped>
    #echartsBox{
        width: 100%;
        height: 100%;
        background-color: aquamarine;
    }
</style>

Vue3部分：

渲染图表就不多做讲解，节约大家时间，直接上跟随容器的变化而变化部分，完整代码放在最后

 //跟随盒子的变化而变化
    let erd = elementResizeDetectorMaker()
    erd.listenTo(Chart.value,() => {
        nextTick(() => {
            Chart.resize()
        })
    })

在vue3里我使用的ref去拿的容器，完整代码如下：

<template>
    <div id="echartsBox" ref="myEcharts">
    </div>
</template>
<script lang="ts" setup>
import { ref ,onMounted, nextTick } from 'vue'
import { init as chartInit,  } from "echarts"
import elementResizeDetectorMaker from "element-resize-detector";

const myEcharts: any = ref<HTMLDivElement | null>(null) 
let Chart:any;
function initEcharts(){
    let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                        {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar',
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            };
    EchartsPieInit(option)
    }

function EchartsPieInit(option:any) {
    Chart = chartInit(myEcharts.value);
    Chart.clear();
    Chart.setOption(option);
    //跟随窗口的变化而变化
    window.addEventListener('resize', function () {
        Chart.resize();
    });
    //跟随盒子的变化而变化
    let erd = elementResizeDetectorMaker()
    erd.listenTo(Chart.value,() => {
        nextTick(() => {
            Chart.resize()
        })
    })
}
onMounted(() => {
    initEcharts()
})
</script>

<style lang="scss" scoped>
    #echartsBox{
        width: 100%;
        height: 100%;
        background-color: aquamarine;
    }
</style>