echart图表大小怎么调节?

图片描述图片描述

图表所在的div这么大

插件自己创建的div这么大图片描述

图表却这么小,求解释

阅读 27.5k
4 个回答

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

官方文档 上是这样说的

  • width

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

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

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

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

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

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

自己实验下哇。

给个固定宽高试试

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题