javascript - 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

Answer 2

你遇到的问题可能是因为 ECharts 图表的 grid 配置项没有正确地设置，导致图表的内容区域（即 grid 区域）没有占满整个容器。

你可以尝试调整 grid 配置项，使其占满整个容器。具体的做法是将 grid 的 left、right、top 和 bottom 属性都设置为 '0'。这样，图表的内容区域就会扩展到容器的边界。

你的 grid 配置项可以修改为：

grid: {  left: '0',  right: '0',  top: '0',  bottom: '0',},

另外，你也需要确保你的容器（即 .chartbox）具有明确的高度和宽度。在你的 CSS 样式中，你已经为 .chartbox 设置了 height: 100%; 和 width: 100%;，这意味着它应该占据其父容器的全部空间。但是，如果父容器没有明确的尺寸，那么 .chartbox 的尺寸也可能是不确定的。因此，你需要确保 .linebarchart-page（即 .chartbox 的父容器）具有明确的尺寸。

如果 .linebarchart-page 的父容器也是相对定位（即尺寸也是百分比），那么你需要一直向上查找，直到找到一个有明确尺寸的容器为止。如果整个页面都没有明确的尺寸，那么你可能需要在 CSS 中为 body 或 html 设置明确的尺寸。

此外，请注意，使用百分比尺寸时，所有涉及的元素都需要有明确的尺寸，否则可能会出现布局问题。例如，如果 .linebarchart-page 的父容器没有尺寸，那么 .linebarchart-page 的 100% 尺寸就没有依据，从而可能导致布局问题。

希望这可以帮助你解决问题！如果还有其他问题，请随时提问。