学习调整echarts中toolbox位置toolBox工具栏属性

学习调整echarts中toolbox位置toolBox工具栏属性

toolbox工具栏属性介绍

参考网址:https://echarts.apache.org/zh/option.html#tooltip

属性 类型 说明
toolbox.show boolean 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 开头。

示例代码

javascript 复制代码
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", //图例高度

};

代码

javascript 复制代码
 toolbox: {
                left: 'center',
                top: '5%',
                feature: {
                    saveAsImage: {},//保存图片
                    dataView: {
                        show: true, title: '数据视图', readOnly: false,

                    }, // 数据视图
                    restore: {},  // 重置
                    dataZoom: {}, // 区域缩放
                    magicType: {  // 动态类型切换
                        type: ['bar', 'line']
                    },

                    myFull: {
                        show: true,
                        title: "全屏查看",
                        icon:
                            "path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891",
                        onclick: () => {
                            this.fullFlag = true;
                            let element = document.getElementById(id);

                            // 一些浏览器的兼容性
                            if (element.requestFullScreen) {
                                // HTML W3C 提议
                                element.requestFullScreen();
                            } else if (element.msRequestFullscreen) {
                                // IE11
                                element.msRequestFullScreen();
                            } else if (element.webkitRequestFullScreen) {
                                // Webkit (works in Safari5.1 and Chrome 15)
                                element.webkitRequestFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                // Firefox (works in nightly)
                                element.mozRequestFullScreen();
                            }

                            // 退出全屏
                            if (element.requestFullScreen) {
                                document.exitFullscreen();
                            } else if (element.msRequestFullScreen) {
                                document.msExitFullscreen();
                            } else if (element.webkitRequestFullScreen) {
                                document.webkitCancelFullScreen();
                            } else if (element.mozRequestFullScreen) {
                                document.mozCancelFullScreen();
                            }
                        }
                    }
                }
            }

参数说明

javascript 复制代码
options:{
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",                              //图例高度
};
}
相关推荐
皮皮林5514 小时前
IDEA 源码阅读利器,你居然还不会?
java·intellij idea
卡尔特斯8 小时前
Android Kotlin 项目代理配置【详细步骤(可选)】
android·java·kotlin
白鲸开源8 小时前
Ubuntu 22 下 DolphinScheduler 3.x 伪集群部署实录
java·ubuntu·开源
ytadpole8 小时前
Java 25 新特性 更简洁、更高效、更现代
java·后端
纪莫8 小时前
A公司一面:类加载的过程是怎么样的? 双亲委派的优点和缺点? 产生fullGC的情况有哪些? spring的动态代理有哪些?区别是什么? 如何排查CPU使用率过高?
java·java面试⑧股
JavaGuide9 小时前
JDK 25(长期支持版) 发布,新特性解读!
java·后端
用户3721574261359 小时前
Java 轻松批量替换 Word 文档文字内容
java
白鲸开源9 小时前
教你数分钟内创建并运行一个 DolphinScheduler Workflow!
java
Java中文社群10 小时前
有点意思!Java8后最有用新特性排行榜!
java·后端·面试
代码匠心10 小时前
从零开始学Flink:数据源
java·大数据·后端·flink