echarts自适应方案

在项目中使用了 vue-echarts 虽然提供了 autoresize 用来自适应 但有时侯我们的窗体根本不会改变大小，当我们打开侧边栏时，我们的 DOM 已经发生了大小变化，这个时候无法响应式的做出变化。

在现在的开发环境中往往需要自适应，但 Echarts 恰恰要我们设置一个宽高，这是非常不方便的

我们要实现的需求

1. 自适应大小
2. 保持宽高比
3. 无需精确设置大小

实现

我们使用内边距来实现 宽高比例保持不变.

通过监听 object 元素中 window 的 resize 事件来触发 echarts 的 resize 事件.

这里使用的是 vue-echarts 所以还要改变 x-vue-echarts 的样式 才能使 echarts 得到确切的大小尺寸.

<style lang="scss">
  x-vue-echarts {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .filling-object-el {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -9999;
  }
  .container {
    position: relative;
    width: 50%;
    &::after {
      content: '';
      display: block;
      width: 100%;
      /* 这里调节宽高比 可以使用媒体查询控制 */
      padding-bottom: 100%;
      @media screen {
        /* ... */
      }
    }
  }
</style>
<div class="container">
  <object
    data="about:blank"
    class="filling-object-el"
    ref="filling"
    type="text/html"></object>
  <v-chart :ref="chart" />
</div>

<script>
  	// ....
  export default defineComponent({
    setup: () => {
       // ....
  		const charts = reactive<ECharts[]>([])
  		const chart = (el: ECharts) => {
  		      if (el) {
  		        charts.push(el)
  		      }
  		    }
      const filling = ref<HTMLObjectElement | null>(null)
      onMounted(() => {
        filling.value?.contentWindow?.addEventListener('resize', () => {
        charts.forEach((el) => {
          el.resize()
        })
      })
      })

      return {
        chart
      }
  	}
  })
</script>