学习调整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",                              //图例高度
};
}
相关推荐
勤奋的知更鸟17 分钟前
Java 编程之模板方法模式
java·开发语言·模板方法模式
逸风尊者38 分钟前
开发易掌握的知识:GeoHash查找附近空闲车辆
java·后端
碎叶城李白1 小时前
若依学习笔记1-validated
java·笔记·学习·validated
im_AMBER2 小时前
学习日志05 python
python·学习
都叫我大帅哥2 小时前
🌊 Redis Stream深度探险:从秒杀系统到面试通关
java·redis
都叫我大帅哥2 小时前
Redis持久化全解析:从健忘症患者到记忆大师的逆袭
java·redis
程序猿阿越2 小时前
Kafka源码(一)Controller选举与创建Topic
java·后端·源码
程序无bug2 小时前
Spring6 当中 Bean 的生命周期的详细解析:有五步,有七步,有十步
java
二川bro2 小时前
飞算智造JavaAI:智能编程革命——AI重构Java开发新范式
java·人工智能·重构