Echarts常用API(echarts和echartsInstance)

一、echarts上的方法

一般在项目中引入echarts之后,可以获得一个全局的echarts对象。

1.下面是几个比较常用的echarts方法

echarts.init()

创建一个echarts实例,返回echarts实例。不能在单个容器中创建多个echarts实例。

(dom: HTMLDivElement|HTMLCanvasElement, theme?: Object|string, opts?: {
    devicePixelRatio?: number
    renderer?: string
    width?: number|string
    height? number|string
}) => ECharts

echarts.dispose(target: ECharts|HTMLDivElement|HTMLCanvasElement)

销毁实例。实例销毁后无法再被使用。

echarts.getInstanceByDom(target: HTMLDivElement|HTMLCanvasElement)

获取Dom容器上的实例。

echarts.registerTheme(themeName: string, theme: Object)

注册主题,用于初始化实例的时候指定。

2.然后是几个比较具体的方法

echarts.connect(group:string|Array)

多个图表实例实现联动

echarts.disconnect(group:string)

解除图表实例的联动,如果只需要移除单个实例,可以通过将该图表实例group设为空。

echarts.registerMap(mapName: string, geoJson: Object, specialAreas?: Object)

注册可用的地图。必须在包括geo组件或者map图表类型的时候才能使用。

echarts.getMap(mapName: string) => Object

获取已注册的地图,返回的对象类型是:

{
    // 地图的 geoJson 数据
    geoJson: Object,
    // 地图的特殊区域,见 registerMap
    specialAreas: Object
}

echarts.graphic

图形相关帮助方法。主要有两个方法:clipPointsByRect()和clipRectByRect()。
1)clipPointsByRect()
输入一组点,一个矩形,返回被矩形截取过的点

(
    // 要被截取的点列表,如 [[23, 44], [12, 15], ...]。
    points: Array.<Array.<number>>,
    // 用于截取点的矩形。
    rect: {
        x: number,
        y: number,
         number,
        height: number
}
) => Array.<Array.<number>> // 截取结果。

2)clipRectByRect()
输入两个矩形,返回第二个矩形截取第一个矩形的结果。

(
    // 要被截取的矩形。
    targetRect: {
        x: number,
        y: number,
         number,
        height: number
    },
    // 用于截取点的矩形。
    rect: {
        x: number,
        y: number,
         number,
        height: number
    }
) => { // 截取结果。
    x: number,
    y: number,
     number,
    height: number
}

如果矩形完全被截取完,则会返回undefined。

二、echartsInstance的方法

1.echartsInstance.group

图表的分组,用于联动。

2.echartsInstance.setOption()

(option: Object, notMerge?: boolean, lazyUpdate?: boolean)
or
(option: Object, opts?: Object)

设置图表实例的配置项和数据,万能接口,所有参数和数据的修改都可以通过setOption来完成。Echarts会合并新的参数和数据,然后刷新图表。还有开启动画的话,Echarts会找到两组数据的差异然后通过合适的动画去展示。
notMerge: 可选参数,是否可以不和之前的option进行合并,默认为false,进行合并。
lazyUpdate:也是一个可选参数,在设置完option之后是否不更新图表。默认为false,即立即更新。
注意:lazyUpdate这个参数,设置为false的时候,会立即更新图表。一般在做项目的时候,会根据一定的不同条件值(时间等condition)来在一个div容器上渲染具有不同数据的图表。这时候会从后端获取不同的数据来渲染echarts图表。这时候需要将lazyUpdate参数设置为true,然后图表才能随着数据的变化而正常变化。

3.下面是几个获取条件的方法

1)echartsInstance.getWidth() => number

获取实例所在容器的宽度。

2)echartsInstance.getHeight() => number

获取实例所在容器的高度。

3)echartsInstance.getDom() => HTMLCanvasElement|HTMLDivElement

获取实例容器的dom节点

4)echartsInstance.getOption() => Object

获取当前实例维护的option对象,返回的option对象是经过用户多次setOption之后修改合并之后的配置项和数据,也记录了用户的交互状态。

4.下面是几个和echarts实例事件相关的方法

1)echartsInstance.dispatchAction(payload:Object)

触发图表行为。payload可以通过batch属性同时触发多个行为。

2)echartsInstance.on()

参数列表:

(
    eventName: string,
    handler: Function,
    context?: Object
)
(
    eventName: string,
    query: string|Object,
    handler: Function,
    context?: Object
)

绑定事件处理函数。
Echarts的事件有两种。一种是鼠标事件。还有一种是通过dispatchAction触发的事件,每个action上都有对应的事件。
注意:如果事件是外部dispatchAction触发,并且 action 中有 batch 属性触发批量的行为,则相应的响应事件参数里也会把属性都放在 batch 属性中。???

3)echartsInstance.off((eventName: string, handler?: Function))

解绑事件处理函数.handler是可选参数,可以传入需要解绑的处理函数,如果不传的话,则解绑事件下所有绑定的处理函数。

5.涉及到坐标系上的点的方法

1)echartsInstance.convertToPixel()

方法的参数列表:

(
    // finder 用于指示『使用哪个坐标系进行转换』。
    // 通常地,可以使用 index 或者 id 或者 name 来定位。
    finder: {
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },
    // 要被转换的值。
    value: Array|string
    // 转换的结果为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。
) => Array|string

转换坐标系上的点到像素坐标值

2)echartsInstance.convertFromPixel()

方法列表参数:

(
    // finder 用于指示『使用哪个坐标系进行转换』。
    // 通常地,可以使用 index 或者 id 或者 name 来定位。
    finder: {
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },
    // 要被转换的值,为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。
    value: Array|string
    // 转换的结果,为逻辑坐标值。
) => Array|string

转换像素坐标值到逻辑坐标系上的点,是convertToPixel的逆运算。

3)echartsInstance.containPixel

方法参数列表

(
    // finder 用于指示『在哪个坐标系或者系列上判断』。
    // 通常地,可以使用 index 或者 id 或者 name 来定位。
    finder: {
        seriesIndex?: number,
        seriesId?: string,
        seriesName?: string,
        geoIndex?: number,
        geoId?: string,
        geoName?: string,
        xAxisIndex?: number,
        xAxisId?: string,
        xAxisName?: string,
        yAxisIndex?: number,
        yAxisId?: string,
        yAxisName?: string,
        gridIndex?: number,
        gridId?: string
        gridName?: string
    },
    // 要被判断的点,为像素坐标值,以 echarts 实例的 dom 节点的左上角为坐标 [0, 0] 点。
    value: Array
) => boolean

判断指定的点是否在指定的坐标系或系列上。

6.其他的一些方法

1)echartsInstance.showLoading(type?: string, opts?: Object)

显示加载动画效果。可以在加载数据前手动调用该接口显示加载动画,在数据加载完成后调用 hideLoading 隐藏加载动画。

  • type
    可选。加载动画类型。目前只有一种‘default’
  • opts
    可选。加载动画配置项,跟type有关。

2)echartsInstance.hideLoading()

隐藏动画加载效果

3)echartsInstance.getDataURL()

参数列表

(opts: {
    // 导出的格式,可选 png, jpeg
    type?: string,
    // 导出的图片分辨率比例,默认为 1。
    pixelRatio?: number,
    // 导出的图片背景色,默认使用 option 里的 backgroundColor
    backgroundColor?: string,
    // 忽略组件的列表,例如要忽略 toolbox 就是 ['toolbox']
    excludeComponents?: Array.<string>
}) => string

导出图表图片,返回一个base64的URL,可以设置为Image的src。

4)echartsInstance.getConnectedDataURL()

参数列表格式

(opts: {
    // 导出的格式,可选 png, jpeg
    type?: string,
    // 导出的图片分辨率比例,默认为 1。
    pixelRatio?: number,
    // 导出的图片背景色,默认使用 option 里的 backgroundColor
    backgroundColor?: string,
    // 忽略组件的列表,例如要忽略 toolbox 就是 ['toolbox']
    excludeComponents?: Array.<string>
}) => string

导出联动的图表图片,返回一个base64的url,可以设置为Image的src。导出图片中每个图表的相对位置跟容器的相对位置有关。

5)echartsInstance.appendData()

(opts: {
    // 要增加数据的系列序号。
    seriesIndex?: string,
    // 增加的数据。
    data?: Array|TypedArray,
}) => string

此接口用于,在大数据量(百万以上)的渲染场景,分片加载数据和增量渲染。在大数据量的场景下(例如地理数的打点),就算数据使用二进制格式,也会有几十或上百兆,在互联网环境下,往往需要分片加载。appendData 接口提供了分片加载后增量渲染的能力,渲染新加入的数据块时不会清除原有已经渲染的部分。
注意

  • 现在不支持 系列(series) 使用 dataset 同时使用 appendData,只支持系列使用自己的 series.data 时使用 appendData
  • 目前并非所有的图表都支持分片加载时的增量渲染。目前支持的图有:ECharts 基础版本的 散点图(scatter) 和 线图(lines)。ECharts GL 的 散点图(scatterGL)、线图(linesGL) 和 可视化建筑群(polygons3D)

6)echartsInstance.clear()

清空当前实例。会移除实例中所有的组件和图表。清空后调用getOption会返回一个{}空对象。

7)echartsInstance.isDisposed

当前实例是否已经被释放

8)echartsInstance.dispose

销毁实例。实例销毁之后无法再被使用。

原文地址:https://www.cnblogs.com/sminocence/p/11226861.html