一、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,
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的方法
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
销毁实例。实例销毁之后无法再被使用。