echartsInstance 对象

这是通过 echarts.init 创建的实例。

  • echartsInstance.group:
    • 图表的分组,用于联动
  • echartsInstance.setOption: (option: Object, notMerge: boolean, notRefreshImmediately: boolean)
    • 设置图表实例的配置项以及数据,万能接口,所有参数和数据的修改都可以通过setOption完成,ECharts 会合并新的参数和数据,然后刷新图表。如果开启动画的话,ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
    • option: 图表的配置项和数据,具体见配置项手册
    • notMerge: 可选,是否不跟之前设置的option进行合并,默认为false,即合并。
    • notRefreshImmediately: 可选,在设置完option后是否不立即刷新画布,默认为false,即立即刷新。
  • echartsInstance.getWidth: 获取 ECharts 实例容器的宽度。
  • echartsInstance.getHeight: 获取 ECharts 实例容器的高度。
  • echartsInstance.getOption:获取当前实例中维护的option对象,返回的option对象中包含了用户多次setOption合并得到的配置项和数据,也记录了用户交互的状态,例如图例的开关,数据区域缩放选择的范围等等。所以从这份 option 可以恢复或者得到一个新的一模一样的实例。注意返回回来的属性值都是一个数组
  • echartsInstance.resize: 改变图表尺寸,在容器大小发生改变时需要手动调用。
  • echartsInstance.dispatchAction: (payload: Object)
    • 触发图表行为,例如图例开关legendToggleSelect, 数据区域缩放dataZoom,显示提示框showTip等等,更多见 actionevents 的文档。
  • echartsInstance.on: (eventName: string, handler: Function, context?: Object) 绑定事件处理函数。
    • eventName: 事件名称,全小写,例如'click','mousemove', 'legendselected'
    • handler: 事件处理函数。格式为:(event: Object)
    • context: 可选。回调函数内部的context,即this的指向。
  • echartsInstance.off: (eventName: string, handler?: Function) 解绑事件处理函数。
    • eventName: 事件名称。
    • handler: 可选,可以传入需要解绑的处理函数,不传的话解绑所有该类型的事件函数。
  • echartsInstance.showLoading: (type?: string, opts?: Object) 显示加载动画效果。可以在加载数据前手动调用改接口显示加载动画,在动画加载完成后调用 hideLoading 隐藏加载动画。

    • type: 可选,加载动画类型,目前只有一种'default'
    • opts: 可选,加载动画配置项,跟type有关,下面是默认配置项:
        default: {
            text: 'loading',
            color: '#c23531',
            textColor: '#000',
            maskColor: 'rgba(255, 255, 255, 0.8)',
            zlevel: 0
      
  • echartsInstance.hideLoading: 隐藏动画加载效果。

  • echartsInstance.getDataURL: 导出图表图片,返回一个 base64 的 url,可以设置为Image的src。
          (opts: {
              // 导出的格式,可选 png, jpeg
              type?: string,
              // 导出的图片分辨率比例,默认为 1。
              pixelRatio?: number,
              // 导出的图片背景色,默认使用 option 里的 backgroundColor
              backgroundColor?: string
          }) => string
    
  • echartsInstance.getConnectedDataURL: 导出联动的图表图片,返回一个 base64 的 url,可以设置为Image的src。导出图片中每个图表的相对位置跟器容器的相对位置有关。
          (opts: {
              // 导出的格式,可选 png, jpeg
              type: string,
              // 导出的图片分辨率比例,默认为 1。
              pixelRatio: number,
              // 导出的图片背景色,默认使用 option 里的 backgroundColor
              backgroundColor: string
          }) => string
    
  • echartsInstance.clear: 清空当前实例,会移除实例中所有的组件和图表。清空后调用 getOption 方法返回一个{}空对象。
  • echartsInstance.isDisposed: (返回boolean)当前实例是否已经被释放。
  • echartsInstance.dispose: 销毁实例,销毁后实例无法再被使用。