如何配置图表自适应容器宽高？

Question

我在使用VChart图表时，希望图表能够自动适应外部容器的大小，应该如何操作？

Answer 1

<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script>
import echarts from 'echarts'; 

export default {
  data() {
    return {
      chartInstance: null,
    };
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartContainer = this.$refs.chartContainer;

      this.chartInstance = echarts.init(chartContainer);
      const option = {
        // 配置选项
        
      };
      this.chartInstance.setOption(option);

      window.addEventListener('resize', this.resizeChart);
    },
    resizeChart() {
      
      if (this.chartInstance) {
        this.chartInstance.resize();
      }
    },
  },
  beforeDestroy() {
  
    window.removeEventListener('resize', this.resizeChart);
  },
};
</script>

<style scoped>
.chart-container {
  width: 100%; 
  height: 400px;
}
</style>

Answer 2

解决方案 Solution

VChart的图表提供autoFit属性，在默认情况下就是自适应容器大小的。该配置的优先级高于构造函数中的 autoFit 配置。如果用户配置了 width，则以用户配置的 width 为准，height 同理。

你这边没有提供更多的背景信息，我猜测一下图表没有自适应的原因：

1. 如果你在spec里指定的大小，此时将不会再自适应容器大小
2. spec中的autoFit开关被关闭了
3. 外部通过css限制了Dom的尺寸

一般来说前两种情况是常见的，你可以输出一下你的最终spec排查一下你得情况。

代码示例 Code Example

const spec = {
  type: 'common',
  autoFit:true,
  (...)
  }

相关文档 Quote

tooltip option：https://visactor.io/vchart/option/barChart#autoFit

github：https://github.com/VisActor/VChart