echarts toolbox 工具框

1: 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%'
    width:"auto",  //图例宽度
    height:"auto", //图例高度

   }

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
ECharts toolboxECharts 提供的一个工具箱,包含了常用的数据视图、数据区域缩放、动态类型切换、保存图片等功能。以下是 ECharts toolbox 相关配置: 1. `show`:是否显示 toolbox 组件,默认为 true。 2. `orient`:toolbox 组件的布局朝向,可选值为 "horizontal"(水平排列)和 "vertical"(垂直排列),默认为 "horizontal"。 3. `itemSize`:toolbox 组件中每个工具项的尺寸,可以是一个数字或者数组,数组中的两个数字分别表示宽度和高度,默认为 15。 4. `itemGap`:toolbox 组件中每个工具项之间的间距,可以是一个数字或者字符串(如 "20%"),默认为 10。 5. `iconStyle`:toolbox 组件中每个工具项的图标样式,可以设置图标的颜色、大小、边等样式。 6. `feature`:toolbox 组件中的工具项配置,包括了数据视图、数据区域缩放、动态类型切换、保存图片等功能,可以根据需求选择需要的工具项。 7. `dataView`:数据视图工具项配置,包括了是否显示数据视图、数据视图的标题、数据视图的样式等属性。 8. `dataZoom`:数据区域缩放工具项配置,包括了是否显示数据区域缩放、数据区域缩放的类型、数据区域缩放的范围等属性。 9. `magicType`:动态类型切换工具项配置,包括了是否显示动态类型切换、动态类型切换的类型、动态类型切换的标题等属性。 10. `saveAsImage`:保存图片工具项配置,包括了是否显示保存图片、保存图片的格式、保存图片的名称等属性。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值