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

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

2024-02-05 11:02:41 前端知识 前端哥 557 43 我要收藏
公共操作:

引入插件

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>

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1385.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!