Echarts根据数据的变化进行重绘

echartsInstance即通过 echarts.init 创建的实例。

echartsInstance. resize

Function

(opts?: {
    width?: number|string,
    height?: number|string,
    silent?: boolean
}) => ECharts

改变图表尺寸，在容器大小发生改变时需要手动调用。

参数

• opts

  opts 可缺省。有下面几个可选项：

  • width

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

  • height

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

  • silent

    是否禁止抛出事件。默认为 false。

Tip: 有时候图表会放在多个标签页里，那些初始隐藏的标签在初始化图表的时候因为获取不到容器的实际高宽，可能会绘制失败，因此在切换到该标签页时需要手动调用 resize 方法获取正确的高宽并且刷新画布，或者在 opts 中显示指定图表高宽。

实际使用时echartsInstance.setOption(option)后写这么两句

  // onresize 事件会在窗口或框架被调整大小时发生
  window.onresize = () => echartsInstance.resize()
  window.addEventListener('resize',() => echartsInstance.resize())