echarts图表不能不满包裹容器？

Question

echart图表canvas画布填充不满包裹它的盒子。
布局：子组件

<template>
  <div class="linebarchart-page">
    <div class="chartbox" ref="chartbox"></div>
  </div>
</template>

子组件样式：

.linebarchart-page {
  height: 100%;
  width: 100%;
  .chartbox {
    height: 100%;
    width: 100%;
  }
}

注册子组件:

 <div class="left-box">
          <span>当班合格/不良统计</span>
          <dv-border-box-12 style="flex: 0 1 33%">
            <LineBarChart ref="currentTotal" v-show="currentTotalIsShow" style="height:100%;width:100%;"></LineBarChart>
          </dv-border-box-12>
          <span>产品合格率统计</span>
          <dv-border-box-13 style="flex: 0 1 33%">
            <LineBarChart ref="productionPassRateStatistic"></LineBarChart
          ></dv-border-box-13>
          <span>产能达成率</span>
          <dv-border-box-13 style="flex: 0 1 33%">
            <LineBarChart ref="productionAchievingRate"></LineBarChart
          ></dv-border-box-13>
        </div>

图表渲染：

 initChart(data) {
      this.$nextTick(() => {
        this.chartInstance = echarts.init(this.$refs.chartbox)
      })
      this.chartInstance.setOption({
        title: {
          textStyle: {
            color: '#fff',
          },
        },
        tooltip: {
          show: true,
        },
        grid: {
          top: '40px',
          left: '40px',
          right: '0px',
          bottom: '20px',
        },
        legend: {
          type: 'plain',
          show: true,
          bottom: -10,
          textStyle: {
            color: '#fff',
          },
        },
        xAxis: {
          name: '件',
          data: [1, 1, 1, 1],
        },
        yAxis: {
          name: data.yAxisName,
          type: 'value',
        },
        series: [
          {
            name: data.itemTitle[0],
            type: data.type[0],
            data: [1, 1, 1, 1],
          },
          {
            name: data.itemTitle[1],
            type: data.type[1],
            data: [1, 1, 1, 1, 1],
          },
          {
            name: data.itemTitle[2],
            type: data.type[2],
            data: [1, 1, 1, 1],
          },
        ],
      })
    },

在mounted渲染:

 mounted() {
    this.initChart()
  },

控制台元素：

给包裹canvas的盒子具体的宽高就可以布满容器

Answer 1

检查 initChart 执行的时候。 .linebarchart-page 元素是否有固定的宽高？

因为 .linebarchart-page 和 .chartbox 都是 width:100%;height:100%; 所以如果 EChart 初始化之后外部容器的宽高改变了你的图表就不会重新 resize。需要给你的 .chartbox 做一下 resize 的监听。改变宽高之后重新执行一下你的 echartsInstance 的 resize 方法

---

#echarts. init | Documentation - Apache ECharts
#echartsInstance. resize | Documentation - Apache ECharts
ResizeObserver - Web API | MDN