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)
销毁实例。实例销毁后⽆法再被使⽤。
获取Dom容器上的实例。
注册主题，⽤于初始化实例的时候指定。
2.然后是⼏个⽐较具体的⽅法
多个图表实例实现联动
echarts.disconnect(group:string)
解除图表实例的联动，如果只需要移除单个实例，可以通过将该图表实例group设为空。
注册可⽤的地图。必须在包括geo组件或者map图表类型的时候才能使⽤。
获取已注册的地图，返回的对象类型是：
{
// 地图的 geoJson 数据
geoJson: Object,
// 地图的特殊区域，见 registerMap
specialAreas: Object
}
图形相关帮助⽅法。主要有两个⽅法：clipPointsByRect()和clipRectByRect()。
1）clipPointsByRect()
输⼊⼀组点，⼀个矩形，返回被矩形截取过的点
(
// 要被截取的点列表，如 [[23, 44], [12, 15], ...]。
points: Array.<Array.<number>>,
// ⽤于截取点的矩形。
rect: {
x: number,
y: number,
width: number,
height: number
}
) => Array.<Array.<number>> // 截取结果。
2）clipRectByRect()
输⼊两个矩形，返回第⼆个矩形截取第⼀个矩形的结果。
(
// 要被截取的矩形。
targetRect: {
x: number,
y: number,
width: number,
height: number
},
// ⽤于截取点的矩形。
rect: {
x: number,
y: number,
width: number,
height: number
}
) => { // 截取结果。
x: number,
y: number,
width: number,
height: number
}
如果矩形完全被截取完，则会返回undefined。
⼆、echartsInstance的⽅法
图表的分组，⽤于联动。
(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）Width() => number
获取实例所在容器的宽度。
2）Height() => number
获取实例所在容器的⾼度。
3）Dom() => HTMLCanvasElement|HTMLDivElement
获取实例容器的dom节点
4）Option() => Object
获取当前实例维护的option对象，返回的option对象是经过⽤户多次setOption之后修改合并之后的配置项和数据，也记录了⽤户的交互状态。
4.下⾯是⼏个和echarts实例事件相关的⽅法
1）echartsInstance.dispatchAction(payload：Object)
触发图表⾏为。payload可以通过batch属性同时触发多个⾏为。
2）()
参数列表：
(
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）vertToPixel()
⽅法的参数列表：
(
/
/ 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）vertFromPixel()
⽅法列表参数：
(
// 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）ainPixel
⽅法参数列表
(
// 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）DataURL()
参数列表
(opts: {
// 导出的格式，可选 png, jpeg
type?: string,
// 导出的图⽚分辨率⽐例，默认为 1。
pixelRatio?: number,
// 导出的图⽚背景⾊，默认使⽤ option ⾥的 backgroundColor
backgroundColor?: string,
// 忽略组件的列表，例如要忽略 toolbox 就是 ['toolbox']
excludeComponents?: Array.<string>
}) => string
导出图表图⽚，返回⼀个base64的URL，可以设置为Image的src。
4）ConnectedDataURL()
参数列表格式
(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
setoption当前实例是否已经被释放
8）echartsInstance.dispose
销毁实例。实例销毁之后⽆法再被使⽤。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。