常见API
-
echarts
-
echarts.init(dom,theme)
。- 创建一个
ECharts
实例,返回echartsinstance
,不能在单个容器上初始化多个ECharts
实例。 dom
是实例容器,一般是一个具有宽高的div
元素。必须要设置宽高。theme
应用的主题。可以是一个主题的配置对象,也可以使用已经通过 使用已经通过echarts.registerTheme
注册的主题名称。注册的主题名称。
- 创建一个
-
echarts.connect(group:string|Array)
-
多个图表实例实现联动。
-
group
为group
的id
。或者图表实例的数组。 -
// 可以直接传入需要联动的实例数组,chart1和chart2为实例 echarts.connect([chart1, chart2]);
echarts.disconnect(group)
-
解除图表实例的联动,如果只需要移除单个实例,可以将通过将该图表实例
group
设为空。
-
-
echarts.registerMap(mapName,geoJson,specialAreas)
-
注册可用的地图,必须在包括
gen
组件或者map
图表类型的时候才能使用。 -
mapName
地图名称,在geo
或者map
图表类型中设置的map
对应的就是该值。 -
geoJson
GeoJson 格式的数据 -
specialAreas
。可选,将地图中的部分区域缩放到合适的位置,可以使得整个地图的显示更加好看。 -
//示例 echarts.registerMap('USA', usaJson, { // 把阿拉斯加移到美国主大陆左下方 Alaska: { // 左上角经度 left: -131, // 左上角纬度 top: 25, // 经度横跨的范围 width: 15 }, // 夏威夷 Hawaii: { left: -110, top: 28, width: 5 }, // 波多黎各 'Puerto Rico': { left: -76, top: 26, width: 2 } });
echarts.getMap(mapName)
-
获取已注册的地图,返回的对象类型如下
-
{ // 地图的 geoJson 数据 geoJson: Object, // 地图的特殊区域,见 registerMap specialAreas: Object }
-
echarts.registerTheme(themeName,theme)
-
注册主题,用于初始化实例的时候指定。
-
-
-
echarts实例
(echartsinstance
)-
echartsinstance.setOption(option,notMerge, lazyUpdate)
option
图表的配置项,各种参数。notMerge
。可选,是否不跟之前设置的option
进行合并,默认为false
,即合并。lazyUpdate
。可选,在设置完option
后是否不立即更新图表,默认为false
,即立即更新。
-
echartsInstance.getWidth
。获取实例容器的宽度。 -
echartsInstance.getHeight
。获取实例容器的高度。 -
echartsInstance.getDom
。获取实例容器的dom
节点。 -
echartsInstance.getOption
。-
获取当前实例中维护的
option
对象,返回的option
对象中包含了用户多次setOption
合并得到的配置项和数据,也记录了用户交互的状态,例如图例的开关,数据区域缩放选择的范围等等。所以从这份option
可以恢复或者得到一个新的一模一样的实例。 -
注意:返回的 option 每个组件的属性值都统一是一个数组,不管
setOption
传进来的时候是单个组件的对象还是多个组件的数组。如下形式:-
{ title: [{...}], legend: [{...}], grid: [{...}] }
-
-
-
配置项
- `title`。标题组件,包含主标题和副标题。对标题的一系列操作。
- `legend`。图例组件(说明小图标)。 展现了不同系列的标记,颜色和名字。**可以通过点击图例控制哪些系列不显示**。
- `grid`。直角坐标系内绘制网格图,网格显示与否,X轴与Y轴距左上角的距离(控制整个图距离左上角的距离)。
- `xAxis`。对X轴的具体设置。
- `yAxis`。对Y轴的具体设置。
- `polar`。极坐标系。
- `radiusAxis`。极坐标系的径向轴。
- `angleAxis`。极坐标系的角度轴。
- `radar`。 雷达图坐标系组件,只适用于 雷达图。
- `dataZoom`。 用于区域缩放,从而能自由关注细节的数据信息,或者概览数据整体,或者去除离群点的影响。
- `visualMap`。 视觉映射组件,用于进行『视觉编码』,也就是将数据映射到视觉元素(视觉通道)。
- `tooltip`。提示框组件。 可以设置在全局,也可以设置在坐标系中,可以设置在`series`中。
- `axisPointer`。 坐标轴指示器的全局公用设置 ,坐标轴指示器是指示坐标轴当前刻度的工具。(鼠标移到那,就显示坐标轴的信息)
- `toolbox`。工具栏。对图的几个操作:导出图片,数据视图,动态类型切换,缩放,重置。
- `brush`。区域选择组件,可以用鼠标拖动区域选中,被选中的区域会**高亮**,没有被选中的区域会变**灰色**。
- `geo`。地理坐标系组件。地图类型:中国,世界。是否开启鼠标缩放和平移,,等等。地图可以从`node_modules`引入。
- `parallel`。平行坐标系。
- `paralleAxis`。平行坐标系中的坐标轴。
- `singleAxis`。单轴图。 可以被应用到散点图中展现一维数据 。
- `timeline`。 提供了在多个 `ECharts option` 间进行切换、播放等操作的功能。 动态的图按时间连贯动画。
- `graphic`。原生图形元素组件。可支持的图形元素包括,`image,text....`。可以使用圆形元素做水印和文本块。
- `calendar`。日历坐标系组件。
- `dataset`。 `ECharts 4 `开始支持了 `数据集`(`dataset`)组件用于单独的数据集声明,从而数据可以单独管理,被多个组件复用,并且可以自由指定数据到视觉的映射。
- `aria`。 使得网页内容和网页应用能够被更多残障人士访问。 支持自动根据图表配置项智能生成描述,使得盲人可以在朗读设备的帮助下了解图表内容,让图表可以被更多人群访问。
- `textStyle`。全局的字体样式。
- `color`。 调色盘颜色列表。如果系列没有设置颜色,则会依次循环从该列表中取颜色作为系列颜色。
- `backgroundColor`。背景色,默认没有。
- `series`。 系列列表。每个系列通过 `type` 决定自己的图表类型 。