Echarts和Bootstrap：响应式宽度

Question

使用百度的Echarts，我想在一个div元素中放置一个饼图（我正在使用Bootstrap）。

所以我有：

<div class="row">
   <div class="col-md-4">
      <div id="chartGift" style="height:400px;"></div>
    </div>
</div>

我已经从官方文档中获取了javascript代码https://ecomfe.github.io/echarts/doc/example/pie1.html#-en。

问题是饼图没有显示，因为在检查HTML代码时，我发现宽度为0。为什么echarts不从父元素设置宽度？我不想设置固定宽度（我发现它可以工作），因为图表不具有响应性。

- Tom

Answer 1

如果你只想设置一个固定的高度，试着将宽度设为容器的100％并设置最小高度：

<div id="chartGift" style="width: 100%; min-height: 400px"></div>

这对我很有帮助！另外，如果您想确保图表具有响应性，您可以在窗口改变大小时强制调整图表的大小。就像这样：

    $(window).on('resize', function(){
        if(chart != null && chart != undefined){
            chart.resize();
        }
    });

希望有所帮助！

- ana.arede

---

那是一个很好的答案。关键是要有 width: 100%，否则 resize() 不起作用。文档也没有提到这一点，但我想这只是常识 :) - Anjan Biswas

但如果我的父级 div 是一个 material-ui card，它就无法正常工作 :( - yongchang

Answer 2

只需使用ResizeObserver来检测图表容器元素大小的变化。即使布局发生更改，也可以正常工作，而且不依赖于窗口调整大小等因素。顺便提一下，如果需要，还可以使用Polyfills。

const container = document.querySelector('#chart');
const chart = echarts.init(container);

new ResizeObserver(() => chart.resize()).observe(container);

- Domske

---

它可以工作，但我必须声明父div容器，而不是包含图表本身的div。 - Apostolos

谢谢，它起作用了，调整大小事件如果我一次最大化窗口，就像这里中所述的那样不起作用，不确定为什么。这已经涵盖了我大部分的情况。 - Rahul A Ranger

这对我有用：我只有两个建议：首先，请确保您的用户正在使用支持（https://caniuse.com/resizeobserver）的浏览器。 其次，不仅要使用宽度，还要使用高度。 我们不想要一个丑陋的图表。 - calebeaires

Answer 3

我在购买的管理员模板中找到了解决方案。初始化图表的解决方案是在内容加载后完成的。以下是工作示例：

    $(document).ready(function () {

        setTimeout(function () {

            // based on prepared DOM, initialize echarts instance
            var myChart = echarts.init(document.getElementById('chart-amount'), 'macarons');
            // specify chart configuration item and data
            var option = {..options of chart here ..}


            // use configuration item and data specified to show chart
            myChart.setOption(option);


        }, 100);

    });

图表容器的样式为：style="height: 400px; width: 100%。当您使用echart工具箱时，这很重要。它喜欢超出容器范围。

希望这可以帮到您 :)

- Szymon Perski

Answer 4

<div id="echart" style="width: 400px; min-width: 100%; height:400px;"></div>

这对我有用。min-width: 100% 就解决了问题。

- Mauricio Mueller Zaccarias

Answer 5

首先，将您的图表包装在一个 div 中，并为该 div 指定 width: 100% 和 height: 100%。这样可以使图表在 flex 布局中使用。

其次，您需要为图表的父容器指定一个宽度（即使是响应式宽度），例如 flex: 1。

- MarcoPoloCode

Answer 6

在解决这个问题时，我不得不做多项工作：

1. 包装器应动态确定图表的大小

    <div class="goal-chart-wrapper" ref="chartContainer">
      <div class="goal-chart" ref="goalChart"></div>
    </div>
   

2. CSS控制包装器的大小并强制子元素遵循父元素的大小

.goal-chart-wrapper {
  width: 100%;
  min-height: 200px;
  position: relative;

  .goal-chart {
    height: 100%;
    width: 100%;
    position: absolute;
  }
}

3. 移除插入画布内（图表选项中）图表的渲染填充。如果不使用containLabel，轴线将消失。

grid: {
 left: 0,
 top: 0,
 right: 0,
 bottom: 0,
 containLabel: true
}

4. 在确定尺寸的父元素上添加一个ResizeObserver，以触发图表的调整大小

import { init } from 'echarts';

const options = {
 // ...
}

this.chart = init(this.$refs.goalChart);
this.chartContainer = this.$refs.chartContainer;

new ResizeObserver(() => {
  this.chart.resize();
}).observe(this.chartContainer);

this.chart.setOption(options);

- F16R

Answer 7

设置 width: 100% 会导致 echarts 的大小与节点（100px）相同，而使用 min-width: 100% 则根本不会出现。因此，这是一些与相对 CSS 单位有关的问题。

但我们仍然可以使用 JS 设置图表容器的大小。

let main = document.querySelector("main");
let chartDom = document.getElementById("echartsGrafikon");

// getting width of element we want to size up to our chart
// do this before chart initialization
let grafikonWidth = main.getBoundingClientRect().width;
chartDom.style.width = grafikonWidth + "px";

// initializing echart
let echartGrafikon = echarts.init(chartDom);

// to dynamically change size         
window.onresize = function () {
    echartGrafikon.resize();
};

- Voj