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

news2025/4/9 1:40:52

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

    • toolbox工具栏属性介绍
    • 示例代码
    • 代码
    • 参数说明

toolbox工具栏属性介绍

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

在这里插入图片描述

属性类型说明
toolbox.showbooleanboolean 默认值为true,是否显示工具栏组件
toolbox.orientstirng默认值为horizontal,工具栏 icon 的布局朝向。可选项为“horizontal”和“vertical”
toolbox.itemSizenumber默认值为15,工具栏 icon 的大小。
toolbox.itemGapnumber默认值为10,工具栏 icon 每项之间的间隔。横向布局时为水平间隔,纵向布局时为纵向间隔。
toolbox.showTitleboolean默认值为true,是否在鼠标 hover 的时候显示每个工具 icon 的标题。
toolbox.featureObject各工具配置项。
除了各个内置的工具按钮外,还可以自定义工具按钮。
注意,自定义的工具名字,只能以 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%'

width:"auto", //图例宽度

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

};

代码

在这里插入图片描述

 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();
                            }
                        }
                    }
                }
            }

参数说明

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",                              //图例高度
};
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1356404.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

解密智能物流时代的未来:成本约束与需求升级的出路

引言: 近年来,中国物流行业蓬勃发展,为经济发展提供了重要的支撑。然而,随着国内外市场的竞争加剧和消费者对物流服务的期望不断提高,物流行业也面临着一系列的挑战。在此时,AR技术的应用融合给物流行业带…

高清网络视频监控平台的应用-城市大交通系统视联网

目 录 一、应用需求 二、系统架构设计 三、功能介绍 1.实时视频监控 2.云台控制 3.语音功能 4. 录像管理与回放 5.告警联动 6.多种显示终端呈现 (1)CS客户端 (2)web客户端 (3&#xf…

【shell漫步】1 变量定义和使用

碎碎念 转眼间已经使用了一个月的shell了,作为一个纯小白,我特别理解刚入门的时候对于linux和shell一头雾水的状态,尤其是打算开始学,但是又找不到学习的“入口函数”的那种感受。所以打算整理一下shell的骨架。shell给我的感触就…

SpringCloud微服务安全之API审计日志功能实现

SpringCloud微服务安全之API审计日志功能实现 1.审计功能介绍2.记录的实体类设计3.保存审计记录到数据库的工具4.审计功能实现1.审计功能介绍 审计日志 定义:谁,在什么时间,干了什么事。位置:认证之后,授权之前。这样就知道是谁在访问,拒绝掉的访问也能被记录。如果放在认…

el-date-picker日期时间选择器限制可选的日期范围

业务场景&#xff1a;需要限制日期时间选择器可选择的日期&#xff0c;有两种模式&#xff0c; 一种是已知范围&#xff0c;只能选已知范围内的日期&#xff0c; 另一种是知道最近天数&#xff0c;只能选今天往前的天数内的日期&#xff0c;超出不能选。 <el-date-picker v-…

Java Review - Spring BeanUtils 踩坑记

文章目录 概述Spring BeanUtils基本使用Code忽略了属性类型导致拷贝失败同一字段在不同的类中定义的类型不一致同一个字段分别使用包装类和基本类型且没有传递实际值布尔类型的属性分别使用了基本类型和包装类型且属性名使用is开头 null值覆盖导致数据异常内部类数据无法成功拷…

vercel部署Gemini pro

一、注册一个vercel账号&#xff08;这个东西类似于第三方的github pages&#xff0c;能部署github中的项目&#xff09; 二、注册结束后&#xff0c;填写github的账号&#xff08;需要事先在该github账号中fork一个gemini的repository&#xff09; 三、babaohuang/GeminiPro…

对话惠买集团董事长兼CEO杜瑞勇:直播电商粗放时代结束,如何用AI+XR打造精细化的智慧直播生态?

“ 未来将是专业选手精细化运营的智慧直播时代。“ 整理 | 梦婕 编辑 | 渔舟 出品&#xff5c;极新&#xff06;北京电子商务协会 直播电商在经过爆发式增长后&#xff0c;从业者不断涌入&#xff0c;竞争日趋激烈&#xff0c;行业发展必然将会进入到一个缓慢增长阶段。直播…

深度优先搜索算法,图的深度优先搜索

深度优先搜索&#xff0c;其核心思想就是以一个点作为搜索的起始点&#xff0c;沿着这个点的分支路径不断地深入&#xff0c;直到没有满足条件的点则退回&#xff0c;并以新的起始点为搜索的点&#xff0c;重复以上的过程&#xff0c;图的遍历就是以深度优先搜索思想为解决问题…

【LeetCode】每日一题 2023_12_30 一周中的第几天(调库)

文章目录 随便聊聊时间题目&#xff1a;一周中的第几天题目描述代码与解题思路 随便聊聊时间 LeetCode&#xff1f;启动&#xff01;&#xff01;&#xff01; 其实昨天我应该也发一个题解的&#xff0c;昨天的每日一题也是一个简单题&#xff0c;可惜当时上头做项目去了&…

3D目标检测(教程+代码)

随着计算机视觉技术的不断发展&#xff0c;3D目标检测成为了一个备受关注的研究领域。与传统的2D目标检测相比&#xff0c;3D目标检测可以在三维空间中对物体进行定位和识别&#xff0c;具有更高的准确性和适用性。本文将介绍3D目标检测的相关概念、方法和代码实现。 一、3D目…

二、串行FLASH文件系统FatFs移植

经过上一节的分析&#xff0c;我们对文件系统有一定的理解了&#xff0c;这一节给大家介绍怎么把FatFs文件系统的这些代码移植到STM32S上&#xff0c;然后STM32利用这一些代码或者函数&#xff0c;以文件的格式对FLASH进行读写数据。 实则对diskio.c提供一些函数接口。 首先将…

ebay头像如何设置?eBay店铺的头像怎么改?-站斧浏览器

ebay头像如何设置&#xff1f; eBay店铺的头像可以通过以下方式进行设置&#xff1a; 登录eBay账户&#xff1a;店主需要使用自己的eBay账号登录到eBay网站。 进入店铺管理后台&#xff1a;在登录后&#xff0c;店主可以点击页面右上角的用户名或店铺名称&#xff0c;从下拉…

初学者SkyWalking详细使用文档

SkyWalking使用文档 下载地址&#xff1a;https://skywalking.apache.org/downloads/ 主要下载&#xff1a;skywalking apm&#xff08;tar&#xff09; 、agents(tar) 解压&#xff1a; &#xff08;可选操作&#xff09;&#xff1a; ​ apache-skywalking-apm-bin --&g…

Flink实时电商数仓之旁路缓存

撤回流的处理 撤回流是指流式处理过程中&#xff0c;两表join过程中的数据是一条一条跑过来的&#xff0c;即原本可以join到一起的数据在刚开始可能并没有join上。 撤回流的格式&#xff1a; 解决方案 定时器&#xff1a;使用定时器定时10s&#xff08;数据最大的时间差值&am…

02-微服务-Eureka注册中心

Eureka注册中心 假如我们的服务提供者user-service部署了多个实例&#xff0c;如图&#xff1a; 大家思考几个问题&#xff1a; order-service在发起远程调用的时候&#xff0c;该如何得知user-service实例的ip地址和端口&#xff1f;有多个user-service实例地址&#xff0c;…

Idea如何配置git

打开Ideal&#xff0c;点击Settings&#xff0c;找到Version Control这一栏&#xff0c;然后点开&#xff0c;找到Git 如果我们电脑是已经有git&#xff0c;那我们就点击那个有点像文件夹的标致&#xff0c;然后找到我们安装在电脑上面的自己安装的git的exe结尾的文件&#xff…

【论文阅读笔记】Stable View Synthesis 和 Enhanced Stable View Synthesis

目录 Stable View Synthesis摘要引言 Enhanced Stable View Synthesis 从Mip-NeRF360的对比实验中找到的两篇文献&#xff0c;使用了卷积神经网络进行渲染和新视角合成&#xff0c;特此记录一下 ToDo Stable View Synthesis paper&#xff1a;https://readpaper.com/pdf-ann…

JS中 focus 和 blur 焦点事件

发现的一个小知识点 focus 获取焦点事件 代码如下&#xff1a; <body><input type"text" placeholder"input输入框"><script>let input document.querySelector(input)input.addEventListener(focus, function (e) {e.target.style.…

(读书笔记)网络是如何连接的

1.1 生成 HTTP 请求消息 浏览器是一个具备多种客户端功能的综合性客户端软件,因此它需要 一些东西来判断应该使用其中哪种功能来访问相应的数据,而各种不同的 URL(Uniform Resource Locator,统一资源定位符。) 就是用来干这个的,比如访问 Web 服务器时用“http:”,而访…