vue3+百度 echarts 高度和宽度自适应的优化

本文介绍了如何在Vue应用中使用echarts图表,当table签切换或视窗大小改变时实现图表尺寸的实时调整,并在数据变化时自动重新渲染图表。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

echart在切换table签或者视窗放大和缩小的时候echart不能实时的变更尺寸,那么我们只需要在dom变化的时候调用echart.resize()就行了

onMounted(() => {
            myEchar = echarts.init(document.getElementById(state.chartId));
            setOptions();//设置参数
            domChange();//
 })
/**
* 监听元素变化
 */
 const domChange =()=> {
            let selfChart = document.getElementById(state.chartId);
            state.observer = new ResizeObserver(() => {
                myEchar.resize();//ecahrts重置尺寸
            });
            state.observer.observe(selfChart); // 监听元素
}

<template>
    <div  class="myChart"  :id="chartId">
    </div>
</template>
<script>
import {toRefs, reactive,ref, onMounted,onUnmounted, onBeforeUnmount, watch,nextTick} from 'vue'
import * as echarts from "echarts";
import _ from "lodash";

export default {
    props: {
        echartData: Object,//传入echart中option配置
        chartName: {type:String,default:''},
        isRoll: Boolean,
        showLoading: {type:Boolean,default:true},//是否要显示loading
    },
    setup(props, context) {
        let myEchar = null;
        //窗口变化监听,避免resize多次执行卡顿
        var resizeTimer = null;
        const state = reactive({
            heightChart:0,
            data: props.echartData,
            interval: null,
            chartId: props.chartName + Math.ceil(Math.random() * 100000000).toString(),
            observer:null,
        })

        onMounted(() => {
            myEchar = echarts.init(document.getElementById(state.chartId));
            setOptions();
            domChange();
        })
        /**
         * 监听元素变化
         */
        const domChange =()=> {
            let selfChart = document.getElementById(state.chartId);
            state.observer = new ResizeObserver(() => {
                myEchar.resize();//ecahrts重置尺寸
            });
            state.observer.observe(selfChart); // 监听元素
        }
        /**监听数据改变,重新渲染 */
        watch(() => _.cloneDeep(props.echartData), (newProps) => {
            state.data = newProps
            if (myEchar) {
                if (props.showLoading) {
                    myEchar.showLoading();
                    setTimeout(() => {
                        myEchar.setOption(state.data);
                        if (props.showLoading) {
                            myEchar.hideLoading()
                        }
                    }, 200)
                }else{
                    myEchar.setOption(state.data);
                }
            }
        }, {deep: true})
        const setOptions = function () {
            myEchar.showLoading()
            setTimeout(() => {
                if (state.data) {
                    myEchar.setOption(state.data);
                    myEchar.getZr().on('click', function (param) {
                        context.emit('backView', param)
                    });
                    myEchar.on('legendselectchanged', function (params) {
                        context.emit('legendselectchanged', params)
                    });
                    myEchar.on('datazoom', function (params) {
                        context.emit('datazoom', params)
                    });

                    if (props.isRoll) {
                        if (state.data.dataZoom != null && state.data.dataZoom.length > 0) {
                            if (state.data.dataZoom[0].endValue == state.data.yAxis[0].data.length) {
                                state.data.dataZoom[0].endValue = 4;
                                state.data.dataZoom[0].startValue = 0;
                            } else {
                                state.data.dataZoom[0].endValue = state.data.dataZoom[0].endValue + 1;
                                state.data.dataZoom[0].startValue = state.data.dataZoom[0].startValue + 1;
                            }
                            myEchar.setOption(state.data);
                        }
                    }
                    myEchar.hideLoading()
                }
            }, 300)
        }

        return {
            ...toRefs(state),
        }
    }
}
</script>
<style lang="less" scoped>
.myChart {
  width: 100%;
  height:100%
}
</style>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值