javascript - echart图表大小怎么调节？

Question

图表所在的p这么大

插件自己创建的p这么大

图表却这么小，求解释

Answer 1

你发的图片有点模糊看不清！ 是不是你的初始化容器错了或者容器样式错了！容器宽度和高度设置成PX不要用百分比！

Answer 2

亲，贴个代码呀

Answer 3

更改你用的容器p的大小即可

Answer 4

给个固定宽高试试

Answer 5

官方文档 上是这样说的

• width

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

• height

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

所以理论上来说生成的图表应该和你的 p 一样大，但是有一种情况除外……就是在生成图表的时候，你的 p 还不是现在这么大，而是比较小的，可能是之后你通过代码使其变大的。

然后来看看官文对 DOM 的说明中的一段：

注：如果p是隐藏的，ECharts 可能会获取不到p的高宽导致初始化失败，这时候可以明确指定p的style.width和style.height，或者在p显示后手动调用 echartsInstance.resize 调整尺寸。

所以你有两个办法，一个是直接设置其 style 内联样式，另一个是对生成的 ECharts 实例调用 resize() 方法改变大小。

自己实验下哇。