zoukankan      html  css  js  c++  java
  • echarts toolBox工具栏

    1、toolbox:这是ECharts中的工具栏。内置有导出图片、数据视图、动态类型切换、数据区域缩放、重置五个工具。

    2、toolbox中的属性,不包含五个工具。里面最主要的就是feature这个,这是toolbox的配置项,五个工具的配置就是在这个里面实现的。

    属性 类型 说明
    toolbox.show boolean 默认值为true,是否显示工具栏组件
    toolbox.orient stirng 默认值为horizontal,工具栏 icon 的布局朝向。可选项为“horizontal”和“vertical”
    toolbox.itemSize number 默认值为15,工具栏 icon 的大小。
    toolbox.itemGap number 默认值为10,工具栏 icon 每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
    toolbox.showTitle boolean 默认值为true,是否在鼠标 hover 的时候显示每个工具 icon 的标题。
    toolbox.feature Object

    各工具配置项。

    除了各个内置的工具按钮外,还可以自定义工具按钮。

    注意,自定义的工具名字,只能以 my 开头。

    来个例子:

    toolbox={

      show : true, //是否显示工具栏组件

      orient:"horizontal", //工具栏 icon 的布局朝向'horizontal' 'vertical'

      itemSize:15, //工具栏 icon 的大小

      itemGap:10, //工具栏 icon 每项之间的间隔

      showTitle:true, //是否在鼠标 hover 的时候显示每个工具 icon 的标题

      feature : {

        mark : { // '辅助线开关'

          show: true

        },

        dataView : { //数据视图工具,可以展现当前图表所用的数据,编辑后可以动态更新

          show: true, //是否显示该工具。

          title:"数据视图",

          readOnly: false, //是否不可编辑(只读)

          lang: ['数据视图', '关闭', '刷新'], //数据视图上有三个话术,默认是['数据视图', '关闭', '刷新']

          backgroundColor:"#fff", //数据视图浮层背景色。

          textareaColor:"#fff", //数据视图浮层文本输入区背景色

          textareaBorderColor:"#333", //数据视图浮层文本输入区边框颜色

          textColor:"#000", //文本颜色。

          buttonColor:"#c23531", //按钮颜色。

          buttonTextColor:"#fff", //按钮文本颜色。

        },

        magicType: { //动态类型切换

          show: true,

          title:"切换", //各个类型的标题文本,可以分别配置。

          type: ['line', 'bar'], //启用的动态类型,包括'line'(切换为折线图), 'bar'(切换为柱状图), 'stack'(切换为堆叠模式), 'tiled'(切换为平铺模式)

        },

        restore : { //配置项还原。

          show: true, //是否显示该工具。

          title:"还原",

        },

        saveAsImage : { //保存为图片。

          show: true, //是否显示该工具。

          type:"png", //保存的图片格式。支持 'png' 和 'jpeg'。

          name:"pic1", //保存的文件名称,默认使用 title.text 作为名称

          backgroundColor:"#ffffff", //保存的图片背景色,默认使用 backgroundColor,如果backgroundColor不存在的话会取白色

          title:"保存为图片",

          pixelRatio:1 //保存图片的分辨率比例,默认跟容器相同大小,如果需要保存更高分辨率的,可以设置为大于 1 的值,例如 2

        },

        dataZoom :{ //数据区域缩放。目前只支持直角坐标系的缩放

          show: true, //是否显示该工具。

          title:"缩放", //缩放和还原的标题文本

          xAxisIndex:0, //指定哪些 xAxis 被控制。如果缺省则控制所有的x轴。如果设置为 false 则不控制任何x轴。如果设置成 3 则控制 axisIndex 为 3 的x轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的x轴

          yAxisIndex:false, //指定哪些 yAxis 被控制。如果缺省则控制所有的y轴。如果设置为 false 则不控制任何y轴。如果设置成 3 则控制 axisIndex 为 3 的y轴。如果设置为 [0, 3] 则控制 axisIndex 为 0 和 3 的y轴

        },

      },

      zlevel:0, //所属图形的Canvas分层,zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面

      z:2, //所属组件的z分层,z值小的图形会被z值大的图形覆盖

      left:"center", //组件离容器左侧的距离,'left', 'center', 'right','20%'

      top:"top", //组件离容器上侧的距离,'top', 'middle', 'bottom','20%'

      right:"auto", //组件离容器右侧的距离,'20%'

      bottom:"auto", //组件离容器下侧的距离,'20%'

      "auto", //图例宽度

      height:"auto", //图例高度

    };

  • 相关阅读:
    面试题11:旋转数组的最小数字(C++)
    2019.9.20学习内容及随堂笔记
    2019.9.19学习内容及小结
    2019.9.18(day39)学习内容及小结
    2019.9.17学习内容及随堂笔记
    2019.9.16学习内容及随堂笔记
    2019.9.12(day36)学习内容及笔记
    2019.9.11学习内容及随堂笔记
    2019.9.10学习内容及随堂笔记
    2019.9.9学习内容及随堂笔记
  • 原文地址:https://www.cnblogs.com/zhilu/p/14047288.html
Copyright © 2011-2022 走看看