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

学习调整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) {// IE11element.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.mzph.cn/news/593024.shtml

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

相关文章

studio3T mongodb 根据查询条件去更新集合

mongodb 等于、不等于$ne、不包含 $nin 以及批量更新数据的使用。 业务场景: 在集合中,根据查询条件,更新数据状态。 实现代码: 1. 部门名称为XXX、状态不等于“完好”的、并且不包含这些编码的数据先查询出来2. 再把状态更新成…

多边形压缩 Douglas-Peucker算法

多边形压缩Douglas-Peucker算法&#xff0c;上代码&#xff01; #include <iostream> #include <cmath> #include <utility> #include <vector> #include <stdexcept> #include <opencv2/opencv.hpp> // 包含OpenCV头文件using namespace…

c++语句详细介绍

文章目录 前言简单语句语句作用域1. 局部作用域2. 全局作用域3. 命名空间作用域4. 块作用域 条件语句1. If语句2. Else语句3. Else If语句4. Switch语句5. 嵌套条件语句6. 条件运算符 循环语句1. While循环2. Do-While循环3. For循环4. 范围Based For循环&#xff08;C11及以上…

Linux内核--进程管理(七)进程的核心—task_truct

目录 一、引言 二、调度机制介绍 ------>2.1、任务ID ------>2.2、亲缘关系 ------>2.3、任务状态 ------>2.4、任务权限 ------------>2.4.1、capabilities ------>2.5、运行统计 ------------>2.5.1、pidstat ------>2.6、进程调度 -----…

This is probably not a problem with npm.

项目场景&#xff1a; 新创建的vue3项目&#xff0c;根据elementplus官网安装步骤进行按需导入安装&#xff0c;运行项目报错 This is probably not a problem with npm.There is likely additional logging output above. 原因分析&#xff1a; 是elementplus安装版本和自动…

Python随机点名

python随机点名 # 生成 0 ~ 9 之间的随机数 # 导入 random(随机数) 模块 import random print(random.randint(0,9)) 执行以上代码输出结果为: 4 尝试一下 以上实例我们使用了 random 模块的 randint() 函数来生成随机数&#xff0c;你每次执行后都返回不同的数字&a…

什么是Vue.js的响应式系统(reactivity system)?如何实现数据的双向绑定?

Vue.js的响应式系统是指一种能够跟踪数据变化并实时更新相关界面的机制。它是Vue.js框架的核心特性之一。 在Vue.js中&#xff0c;你可以使用数据绑定语法将数据绑定到DOM元素上。当绑定的数据发生变化时&#xff0c;Vue.js会自动监听这些变化并更新相关的DOM元素。 Vue.js实…

玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— 编译构建及此过程中的踩坑填坑(1)

接前一篇文章&#xff1a;玩转贝启科技BQ3588C开源鸿蒙系统开发板 —— 代码下载&#xff08;2&#xff09; 本文主要参考&#xff1a; BQ3588C_代码下载 上一回完成了代码下载&#xff0c;本回开始进行编译构建。 1. 编译构建 &#xff08;1&#xff09;执行prebuilts 在源…

lc338 比特位计数

lc338 比特位计数 问题&#xff1a; 给一个整数n&#xff0c;遍历0-n的每一个值&#xff0c;统计每个值二进制中1的个数&#xff0c;返回长度为n1的数组。 题解&#xff1a; Brian Kernighan’s 算法。这个算法的核心思想是每次去掉二进制中最右边的一个1&#xff0c;直到所有…

JavaScript可选链接

注&#xff1a;本节仍然使用之前的饭店的对象&#xff0c;可以看上几篇文章查看代码 ● 如果我们想要看看饭店周一的开门时间&#xff0c;我们会这么写 console.log(restaurant.openingHours.mon.open);原因是我们在开放时间中并没有定义周一的开放时间&#xff0c;所有会报错…

2024年工作计划与目标怎么写?如何用手机制作工作待办清单

2024年的钟声已经到来&#xff0c;对于上班族来说&#xff0c;制定一份切实可行的工作计划与目标是非常有必要的。但是&#xff0c;很多人不知道2024年工作计划与目标怎么写&#xff1f;其实&#xff0c;关键在于明确目标、细化计划、合理安排时间&#xff0c;以确保每一步都稳…

python协程

背景 很早之前有一篇中断地关于协程的文章&#xff0c;彼时从js的事件循环切入,对比学习python的asyncio,感觉是个很大的知识点&#xff0c;想写的内容很多&#xff0c;遂搁浅。本次&#xff0c;抽空补齐这块的内容。 序 协程是什么? 协程是个非常好的概念&#xff0c;它在用…

BIO和NIO编程(待完善)

目录 IO模型 BIO NIO 常见问题 IO模型 Java共支持3种网络编程IO模式&#xff1a;BIO&#xff0c;NIO&#xff0c;AIO BIO 同步阻塞模型&#xff0c;一个客户端连接对应一个处理线程 代码示例&#xff1a; Server端&#xff1a; public class BioServer {private static …

window下载安装Mongodb数据库

我们先要访问他的官网 https://www.mongodb.com/zh-cn 然后顶部导航栏 选择 (Products/产品) 下的 (Community Edition/社区版) 进入界面后 找到 MongoDB Community Server Download 点击下面的按钮 Select package 然后会弹到这个位置 第一个版本 用系统默认选择的就好 第二…

Redis - 挖矿病毒 db0 库 backup 反复出现解决方案

问题描述 腾讯云的服务器&#xff0c;使用 Docker 部署了 Redis 之后&#xff0c;发现 DB0 中总是出现 4 条 key&#xff0c;分别是 backup01backup02backup03backup04 而自己每次存入 db0 中的数据过一会就会被无缘无故删除掉。 原因分析 挖矿病毒 解决方案 在启动的时候…

MySQL唯一索引失效的注意点

【1.实验环境】 Docker环境下的MySQL MySQL版本: 5.7.37 【2.表结构】 CREATE TABLE t_1 (id int(11) NOT NULL AUTO_INCREMENT,student_id char(120) DEFAULT NULL,course_id char(120) DEFAULT NULL,is_delete int(11) NOT NULL DEFAULT 0,PRIMARY KEY (id),KEY idx_stude…

QuPath学习④ 脚本使用

目录 1&#xff0c;基础学习 脚本打印项目中所有图像 访问当前图像内容 访问图像元数据 访问像素 创建ROI 创建对象&#xff08;使 ROI 可见&#xff09; 多个ROI Working with BufferedImage 使用 ImageJ 命令示例 2 脚本导出数据&#xff08;重点&#xff09; …

React16源码: Hooks源码实现

Hooks 1 &#xff09;概述 Hooks 在 React16.7版本出现的新功能Hooks 改变了整体应用开发的模式&#xff0c;同时开发体验会和以前会变得不一样Hooks 让函数组件具有类组件的能力 在 function component 里面没有this无法保存 state通过 Hooks可以让 function component 代替…

PSoc62™开发板之串口通信

实验目的 1.使用串口和PC机通信&#xff1a;接收和发送信息 2.接收GNSS模块定位信息 实验准备 PSoc62™开发板CH340 USB转TTL模块ATGM332D GNSS模块公母头杜邦线x4 板载资源 板载有多少uart 创建工程例程&#xff0c;在libraries/HAL_Drivers/uart_config.h中查看BSP支持…