JSRUN 用代码说话

工具栏组件(toolbox)

编辑教程

工具栏组件(toolbox)

toolbox

在 ECharts 图表的工具栏(toolbox)中,有五个内置的工具,分别是:导出图片,数据视图,动态类型切换,数据区域缩放以及配置项还原,这五个工具的配置在 feature 属性中实现配置。本节在介绍 toolbox 的基本属性时先不讲解 feature 而是将其在下一节中独立介绍。

如下例:

ECharts工具栏组件使用实例


toolbox.show

boolean [ 默认值: true ]

是否显示工具栏组件。


toolbox.orient

string [ 默认值: 'horizontal' ]

工具栏 icon 的布局朝向。

可选:

  • 'horizontal'
  • 'vertical'

toolbox.itemSize

number [ 默认值: 15 ]

工具栏 icon 的大小。


toolbox.itemGap

number [ 默认值: 10 ]

工具栏 icon 每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。


toolbox.showTitle

boolean [ 默认值: true ]

是否在鼠标 hover 的时候显示每个工具 icon 的标题。


toolbox.zlevel

number [ 默认值: 0 ]

所有工具栏图形的 zlevel 值。

zlevel 用于 Canvas 分层,不同 zlevel 值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。

可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的 zlevel。

注意:过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面。


toolbox.z

number [ 默认值: 2 ]

组件的所有图形的 z 值。控制图形的前后顺序。z 值小的图形会被z值大的图形覆盖。

z 相比 zlevel 优先级更低,而且不会创建新的 Canvas。


toolbox.left

string, number [ 默认值: 'auto' ]

工具栏组件离容器左侧的距离。

left 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'left', 'center', 'right'。

如果 left 的值为'left', 'center', 'right',组件会根据相应的位置自动对齐。


toolbox.top

string, number [ 默认值: 'auto' ]

工具栏组件离容器上侧的距离。

top 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比,也可以是 'top', 'middle', 'bottom'。

如果 top 的值为'top', 'middle', 'bottom',组件会根据相应的位置自动对齐。


toolbox.right

string, number [ 默认值: 'auto' ]

工具栏组件离容器右侧的距离。

right 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。


toolbox.bottom

string, number [ 默认值: 'auto' ]

工具栏组件离容器下侧的距离。

bottom 的值可以是像 20 这样的具体像素值,可以是像 '20%' 这样相对于容器高宽的百分比。

默认自适应。


toolbox.width

string, number [ 默认值: 'auto' ]

工具栏组件的宽度。默认自适应。


toolbox.height

string, number [ 默认值: 'auto' ]

工具栏组件的高度。默认自适应。

JSRUN闪电教程系统是国内最先开创的教程维护系统, 所有工程师都可以参与共同维护的闪电教程,让知识的积累变得统一完整、自成体系。 大家可以一起参与进共编,让零散的知识点帮助更多的人。
X
支付宝
9.99
无法付款,请点击这里
金额: 0
备注:
转账时请填写正确的金额和备注信息,到账由人工处理,可能需要较长时间
如有疑问请联系QQ:565830900
正在生成二维码, 此过程可能需要15秒钟