1. 问题描述:
     前端开发在使用echarts图表时,偶尔会出现超出父级容器宽度或高度的情况。
     情景:给echarts设置了100%宽高,父容器设置了固定的宽高,出现图表占满不了父容器或者溢出容器的情况。
  2. 原因:
     一般不是因为图表绘制的方法调用问题,而是绘制渲染时机出现了问题,我们知道,vue渲染页面需要时间,要在页面调用echarts.init(),并且给图表设置配置项chart.setOption(option)。
     调用echarts api生成图表的时机发生在mounted这个生命周期。在页面echarts绘制完成之后进行操作,发现有可能会出现元素虽然挂载了,但是布局还未完成的情况。这就导致图表元素显示超出父级容器很多,同时地,F12可以看到echarts元素的宽高度发生了明显的变化。
     为什么会出现这种情况?父级元素还没有layout的时候,图表就开始生成,这个时候宽度和高度就不受默认布局的影响,而是会找到一个已经布局的大的父级元素作为父级,等真正的父级layout完毕,就超出了图表本身的父级容器。
  3. 解决:
     这其实是一个异步问题通过延迟加载来解决,可设置一个简单的超时函数setTimeOut(callback,timeout),等父容器设置完宽高布局完成之后图表加载。
  export default {
    name: 'ehlPie',
    data() {
      return {
        echart: null,
        options: {
          //省略。。。。
        },
      }
    },
    mounted() {
        setTimeout(() => {
          this.init()
        }, 20)
    },
    methods: {
      init() {
        this.echart = this.$echarts.init(document.getElementById(this.tag))
        this.echart.setOption(this.change(), { lazyMode: true })
        window.addEventListener(
          'resize',
          () => {
            setTimeout(() => {
              this.echart && this.echart.resize()
            }, 100)
          },
          false,
        )
      },
    },
</script>

 一般而言,在使用vue或者react都会容易出现这个问题,原因是我们的模板文件不是一开始就生在html页面中,而是需要经过人为渲染,渲染需要时间,图表生成的时机有可能会早于父级元素layout的时机,尤其当我们使用自适应布局的时候会出现。

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐