echarts 图表随外层div尺寸调整大小

vue中使用echarts ，让图表随外层div尺寸调整大小

Echarts中提供方法：

echartsInstance. resize 

Function

(opts?: {
    width?: number|string,
    height?: number|string,
    silent?: boolean
}) => ECharts

改变图表尺寸，在容器大小发生改变时需要手动调用。

参数

• opts

  opts 可缺省。有下面几个可选项：

  • width

    可显式指定实例宽度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的宽度。

  • height

    可显式指定实例高度，单位为像素。如果传入值为 null/undefined/'auto'，则表示自动取 dom（实例容器）的高度。

  • silent

    是否禁止抛出事件。默认为 false。

Tip: 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布，或者在 opts 中显示指定图表高宽。

 

所以可以通过监听外部div的宽高变化，变化时调整图标尺寸：

props: {
  item: {
    type: Object,
  },
},
data() {
  return {
    barChart: {},
  };
},
watch: {
    "item.width"() {
      this.barChart.resize({
        width: this.item.width,
        height: this.item.height,
      });
    },
    "item.height"() {
      this.barChart.resize({
        width: this.item.width,
        height: this.item.height,
      });
    },
  },
mounted() {
    this.getEchartData();
  },
methods: {
    getEchartData() {
      .....
        myChart.setOption(option);
        this.barChart = myChart;
    },
  },