toolbox

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

如下示例:

toolbox.show   |   boolean

[ default: true ]

是否显示工具栏组件。

toolbox.orient   |   string

[ default: 'horizontal' ]

工具栏 icon 的布局朝向。

可选:'horizontal'

'vertical'

toolbox.itemSize   |   number

[ default: 15 ]

工具栏 icon 的大小。

toolbox.itemGap   |   number

[ default: 10 ]

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

toolbox.showTitle   |   boolean

[ default: true ]

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

toolbox.zlevel   |   number

[ default: 0 ]

所有工具栏图形的 zlevel 值。

zlevel 用于 Canvas 分层,不同 zlevel 值的图形会放置在不同的 Canvas 中,Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁(例如有动画)的组件设置成一个单独的 zlevel。需要注意的是过多的 Canvas 会引起内存开销的增大,在手机端上需要谨慎使用以防崩溃。

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

toolbox.z   |   number

[ default: 2 ]

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

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

toolbox.left   |   string, number

[ default: 'auto' ]

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

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

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

toolbox.top   |   string, number

[ default: 'auto' ]

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

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

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

toolbox.right  |   string, number

[ default: 'auto' ]

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

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

默认自适应。

toolbox.bottom   |   string, number

[ default: 'auto' ]

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

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

默认自适应。

toolbox.width   |   string, number

[ default: 'auto' ]

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

toolbox.height   |   string, number

[ default: 'auto' ]

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

echarts中toolbox位置_ECharts工具栏组件(toolbox)相关推荐

  1. echarts中toolbox位置_echarts toolBox工具栏

    1.toolbox:这是ECharts中的工具栏.内置有导出图片.数据视图.动态类型切换.数据区域缩放.重置五个工具. 2.toolbox中的属性,不包含五个工具.里面最主要的就是feature这个, ...

  2. echarts label固定位置_ECharts+百度地图网络拓扑应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  3. echarts中toolbox位置_echarts toolbox 扩展

    前言## echarts是百度前端团队推出的一个非常强大的开源图表库,我最近在重构的一个内部后台系统也用到了echarts,但是梳理老代码的时候发现有人居然改了node_modules/echarts ...

  4. echarts grid的样式位置_ECharts grid组件配置 提示框浮层的位置

    Function 回调函数,格式如下:(point: Array, params: Object|Array., dom: HTMLDomElement, rect: Object, size: Ob ...

  5. echarts 默认显示图例_echarts图例组件点击显示功能(默认功能点击消失)

    var myChart = echarts.init(document.getElementById('main')); var option = { title: { text: '折线图堆叠' } ...

  6. echarts 仪表盘 文字位置_ECharts 使用series.title.offsetCenter设置仪表盘标题位置

    ECharts 使用series.title.offsetCenter设置仪表盘标题位置 ECharts 使用series.title.offsetCenter设置仪表盘标题位置 1 使用详解 ser ...

  7. echarts 仪表盘 文字位置_ECharts仪表盘样式

    仪表盘截图 Vue仪表盘样式vue代码 总计 Vue仪表盘样式js代码 drawLine(){ // 基于准备好的dom,初始化echarts实例 var option = { // backgrou ...

  8. echarts 仪表盘 文字位置_echarts仪表盘相关配置

    指定图表的配置项和数据 var option = { backgroundColor: "#000", tooltip: { // 本系列特定的 tooltip 设定. show: ...

  9. echarts中如何使用timeline组件

    1.吃碗面 这里关于echarts3 官网的示例我不得不吐槽一下,逼格真高!一小部分示例动不动数据就是国家统计局搞出来的,你脸真大.当然他们做的示例的确是很好,这一点毫无疑问.当我看了echarts3 ...

最新文章

  1. 组合计数 ---- 2020 icpc 上海 The Journey of Geor Autumn(思维划分问题计数+预处理优化)
  2. 吴恩达:告别大数据,AI需要高质量小数据!
  3. idea提交git差件_多人合作使用git,推送代码、和并分支
  4. 基于CentOS7,MySQL5.7的同步/半同步复制实现
  5. 盘点多数企业容易犯的五个大数据错误
  6. Android用开源优势超Windows Mobile
  7. C++ Primer Plus学习(九)——内存模型和名称空间
  8. ASP.NET网站运行常见错误以及解决方法(持续更新)
  9. 微软安全软件_微软在 GitHub 上发布了一个供内部使用的 Linux 发行版 | 新闻拍一拍...
  10. 51单片机带闹钟c语言程序,51单片机定时闹钟程序(带按键)
  11. Jquery头像编辑器
  12. 2021中青杯数学建模B题
  13. 德乐SM2258XT固态硬盘DERLER T-1不认盘量产修复工具
  14. AI 技术本身的一些优势,比如它能够从大量数据里去总结背后的规律
  15. Canvas: trying to draw too large bitmap 红米 k30 奔溃
  16. 教程:如何制作一个可控制的人体骨骼模型
  17. CDN降价之后又一大招 阿里云PCDN正式开放申请
  18. wps在线预览接口_WPS文档在线预览接入的一点心得
  19. BERT用的LayerNorm可能不是你认为的那个Layer Norm?
  20. 【笔记】Java的运算符(赋值运算符号、一元运算符、算术运算符、关系运算符、自增与自减运算符、逻辑运算符、括号运算符、位运算符、三元(三目)运算符)、表达式与语句:简洁表达式

热门文章

  1. Ray-Tracing: Generating Camera Rays(翻译)
  2. EXCLE 使用MID函数实现快速填充年月日
  3. 高校毕业生数字经济就业创业报告
  4. 参考企业微信日程 通过vue+elementUi编写一个按月统计会议的日程计划组件
  5. #周报:11月15日——11月21日
  6. python爬女神_没有忍住,还是用Python爬了N多个女神
  7. 用python需要什么配置电脑,python需要的电脑配置
  8. Java NIO学习笔记
  9. 【Linux】帮助指令 + 文件目录类指令 + 时间日期指令
  10. 产品经理撰写测试用例