[echarts] 图表工具栏 toolbox

option={
    // 工具栏配置
    toolbox:{
        id:'1',                       // 组件ID
        show:true,                    // 是否显示工具栏
        orient:'horizontal',          // 工具栏 icon 的布局朝向
        itemSize:15,                  // 工具栏 icon 的大小
        itemGap:10,                   // 工具栏 icon 每项之间的间隔
        showTitle:true,               // 是否在鼠标悬浮 icon 时,显示每一个工具的标题
        zlevel:1,                     // 组件所有图形的 zlevel 值, 画布 Canvas 分层,图层优先级
        z:1,                          // 组件所有图形的 z 值,图形前后绘制顺序
        left:'10%',                   // 工具栏组件距离容器左侧的距离
        right:'10%',                  // 工具栏组件距离容器右侧的距离
        top:'10%',                    // 工具栏组件距离容器顶部的距离
        bottom:'10%',                 // 工具栏组件距离容器底部的距离   
        width:"20%",                  // 工具栏组件宽度
        height:'10%',                 // 工具栏组件高度 
        // 工具栏的 tooltip 设置
        tooltip:{
            show:true,                                           // 是否展示提示组件
            // formatter:'{a}',                                   // 提示框显示内容,{a} 默认英文名称, {b} 默认中文名称   
            formatter:function(param){
                return '<div>'+param.title+'内容'+'</div>';      //  自定义提示框显示内容        
            },
            // 提示框字体样式
            textStyle:{
                fontSize:18,       
            },     
        },
        // 统一配置工具栏中 icon 的样式 头
        iconStyle:{
            color:'red',                // 图形颜色
            borderWidth:5,              // 图形描边宽度
            borderColor:'red',          // 图形描边颜色
            borderType:'solid',         // 图形描边线类型
            borderDashOffset:10,        // 描边线类型为虚线时,虚线的偏移量
            borderCap:'butt',           // 指定线段末端的形状
            borderJoin:'bevel',         // 指定两个线段连接处的形状 
            borderMiterLimit:10,        // 当 borderJoin 为 miter 时,斜接面比例
            shadowBlur:5,               // 图形阴影长度
            shadowColor:'red',          // 图形阴影颜色
            shadowOffsetX:20,           // 图形阴影水平偏移量
            shadowOffsetY:10,           // 图形阴影竖直偏移量
            opacity:0.8,                // 图形透明度       
        },
        // 统一配置工具栏中 icon 的样式 尾
        
        // 统一配置鼠标 hover 工具 icon 时,强调样式 头
        emphasis:{
            // 强调时,icon 和对应标签样式
            iconStyle:{
                color:'red',                      // 图形的颜色
                borderColor:'#000',               // 图形的描边颜色
                borderWidth:5,                    // 图形的描边宽度
                borderType:'solid',               // 图形描边线的类型
                borderDashOffset:5,               // 图形描边为虚线时,虚线的偏移量
                borderCap:'butt',                 // 指定线段末端的形状
                borderJoin:'bevel',               // 设置两个线段相连部分的形状
                borderMiterLimit:10,              // 当 borderJoin 为 miter 时,斜接面比例
                shadowBlur:10,                    // 图形阴影大小
                shadowColor:'red',                // 图形阴影颜色
                shadowOffsetX:10,                 // 图形阴影水平偏移量
                shadowOffsetY:10,                 // 图形阴影竖直偏移量
                opacity:0.7,                      // 图形透明度
              
                textPosition:'bottom',            // 文字的位置
                textFill:'#fff',                  // 文字颜色
                textAlign:'left',                 // 文字对齐方式
                textBackgroundColor:'red',        // 文本区域填充颜色
                textBorderRadius:'',              // 文本区域圆角大小
                textPadding:10,                   // 文本区域内边距                            
            },   
        },
        // 统一配置鼠标 hover 工具 icon 时,强调样式 尾
        
        // 配置每一个工具项  头
        feature:{
            // 保持 Ehcarts 为图片工具, 头
            saveAsImage:{
                show:true,                      // 是否显示工具
                title:'保持图片',                // 工具标签
                icon:'image://url',             // 工具 icon
                type:'png',                     // 自定义保持图片的后缀
                name:'filename',                // 自定义保持图片的名称,默认获取 tite 标题的 text 内容作为文件名称
                backgroundColor:'auto',         // 保持图片的背景颜色,默认白色
                connectedBackgroundColor:'red', // 如果图表使用了 echarts.connect 对多个图表进行联动,则在导出图片时会导出这些联动的图表。该配置项决定了图表与图表之间间隙处的填充色。          
                excludeComponents:['toolbox'],  // 保持图片时,图片中忽略的组件列表
               
                // ionc 样式设置
                iconStyle:{
                   // ··· 该配置与什么的 iconStyle 统一配置内容一致,在此省去重复代码                         
                },
                
                //  配置鼠标 hover 工具 icon 强调样式
                emphasis:{
                    iconStyle:{
                        // 强调时,icon 和对应标签样式
                        //··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致,在此省去重复代码                    
                    },               
                },                
            },
            // 保持 Ehcarts 为图片, 尾
            
            // 配置项还原 头
            restore:{
                show:true,                       // 是否显示工具
                title:'还原',                    // 鼠标悬浮时显示标签
                icon:'image://url',              // 工具 icon
               
                // ionc 样式设置
                iconStyle:{
                   // ··· 该配置与什么的 iconStyle 统一配置内容一致,在此省去重复代码                         
                },
                
                //  配置鼠标 hover 工具 icon 强调样式
                emphasis:{
                    iconStyle:{
                         // 强调时,icon 和对应标签样式
                        //··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致,在此省去重复代码                    
                    },               
                },               
            },    
            // 配置项还原 尾
            
            // 数据视图,将图表简单以表格形式展示 头
            dataView:{
                show:true,                  // 是否显示工具
                title:'数据视图',            // 工具标签
                icon:"image://url",         // 工具 icon
                
                // ionc 样式设置
                iconStyle:{
                   // ··· 该配置与什么的 iconStyle 统一配置内容一致,在此省去重复代码                         
                },
                
                //  配置鼠标 hover 工具 icon 强调样式
                emphasis:{
                    iconStyle:{
                         // 强调时,icon 和对应标签样式
                        //··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致,在此省去重复代码                    
                    },               
                },          
            },
            // 数据视图,将图表简单以表格形式展示 尾
            
            // 数据区域缩放 头
            dataZoom:{
                show:true,                             // 是否显示工具
                title:['缩放','还原'],                  // 缩放和还原的标题
                filterMode:'filter',                   // 超出范围的数据缩放展示
                xAxisIndex:[0,1],                      // 指定哪些 xAxis 被控制
                yAxisIndex:[0,1],                      // 指定哪些 yAxis 被控制
                icon:{
                       zoom:'image://url',             // 缩放 icon
                       back:'image://url',             // 还原 icon
                },
                // 刷选框样式 头
                brushStyle:{
                    color:'red',                       // 图形颜色
                    borderColor:'red',                 // 图形描边颜色
                    borderWidth:5,                     // 图形描边宽度
                    borderType:'solid',                // 图形描边线类型
                    borderDashOffset:5,                // 图形描边线为虚线时,虚线的偏移量
                    borderCap:'butt',                  // 指定线段末端形状 
                    borderJoin:'bevel',                // 两个线段相连部分的形状
                    borderMiterLimit:10,               // borderJoin 为 miter 时,斜接面比例
                    shadowBlur:20,                     // 图形阴影大小
                    shadowColor:'red',                 // 图形阴影颜色
                    shadowOffsetX:10,                  // 图形阴影水平偏移量
                    shadowOffsetY:10,                  // 图形阴影竖直偏移量
                    opacity:0.5,                       // 图形透明度          
                },
                // 刷选框样式 尾
 
                // ionc 样式设置
                iconStyle:{
                   // ··· 该配置与什么的 iconStyle 统一配置内容一致,在此省去重复代码                         
                },
                
                //  配置鼠标 hover 工具 icon 强调样式
                emphasis:{
                    iconStyle:{
                         // 强调时,icon 和对应标签样式
                        //··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致,在此省去重复代码                    
                    },               
                },          
            },
            // 数据区域缩放 尾
            
            //  切换图形类型 头
            magicType:{
                show:true,                    // 是否显示工具
                // 单独配置每一个图形的标题
                title:{
                    line:'折线图',            // 折线图标题
                    bar:'柱状图',             // 柱状图标题
                    stack:'堆叠',             // 堆叠图标题
                    tiled:'平铺',             // 平铺图标题
                },
                // 单独配置每一个图形的 icon
                icon:{
                  line:'image://url',         // 折线图的 icon       
                  bar:'image://url',          // 柱状图的 icon
                  stack:'image://url',        // 堆叠图的 icon 
                  tiled:'image://url',        // 平铺图的 icon              
                },
                
                // ionc 样式设置
                iconStyle:{
                   // ··· 该配置与什么的 iconStyle 统一配置内容一致,在此省去重复代码                         
                },
                
                //  配置鼠标 hover 工具 icon 强调样式
                emphasis:{
                    iconStyle:{
                         // 强调时,icon 和对应标签样式
                         //··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致,在此省去重复代码                    
                    },               
                }, 
                
                // 单独配置每一个系列的显示数据
                option:{
                    line:{
                        // 这里面的配置和 series 中每个系列中的配置一样
                    },
                                    
                },
                
                // 指定在切换图形类别时,哪些数据图形变化
                seriesIndex:{
                    line:[0,1,2],            // 切换成折线图时,数据一、二、三对应改变
                    bar:[0,2],               // 切换成柱状图时,数据一、三对应改变 
                    // ···             
                },           
            },
            //  切换图形类型 尾
            
            // 选框组件控制按钮 头
            brush:{
                type:['rect','polygon'],      // 开启的哪些选框组件,例如,矩形选框、任意形状选框等
                // 配置选框的 icon
                icon:{
                    rect:'image://url',       // 矩形选框的 icon
                    polygon:'image://url',    // 任意形状选框的 icon
                    lineX:'image://url',      // 横向选框的 icon
                    lineY:'image://url',      // 纵向选框的 icon
                    keep:'image://url',       // 开启单项和多选的 icon
                    clear:'image://url',      // 清空所有选框的 icon         
                },
                // 配置选框的标题
                title:{
                    rect:'矩形选框',
                    polygon:'圈选',
                    lineX:'横向选择',
                    lineY:'纵向选择',
                    keep:'多选',
                    clear:'清除选择',
                }           
            },
            // 选框组件控制按钮 尾
            
            // 自定义工具按钮,名称必须 my 开始, 头
            myTool:{
                show:true,                  // 是否显示
                title:"自定义按钮",          // 工具标题
                icon:'image://url',         // 工具 icon
                onclick:function(){},       // 自定义点击方法
                iconStyle:{
                   // ··· 该配置与什么的 iconStyle 统一配置内容一致,在此省去重复代码                         
                },
                emphasis:{
                    iconStyle:{
                         // 强调时,icon 和对应标签样式
                         //··· 该配置与上面的 emphasis 中 iconStyle 统一配置内容一致,在此省去重复代码                    
                    },               
                },                                              
            }  
            // 自定义工具按钮,名称必须 my 开始, 尾                                        
        },
        // 配置每一个工具项  尾                                     
    }
}

数据视图在这里插入图片描述

数据区域缩放

在这里插入图片描述
动态切图
在这里插入图片描述
刷选框
在这里插入图片描述

参考:

Echarts 配置系列之:图表工具栏 Toolbox

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

算法沉淀——双指针算法(leetcode真题剖析)

算法沉淀——双指针算法 01.移动零02.复写零03.快乐数04.盛最多水的容器05.有效三角形的个数06.和为s的两个数字07.三数之和08.四数之和 双指针算法&#xff08;Two Pointer Algorithm&#xff09;是一种常用于数组&#xff08;或链表&#xff09;操作的算法技巧。它的核心思想…

Kano模型

目录 1.介绍&#xff1a;2.Kano模型的作用&#xff1a;3.KANO模型使用场景&#xff1a;4.使用步骤&#xff1a;4.1设计问卷&#xff1a;4.2 数据分析4.2.1 KANO属性4.2.2 Better系数、Worse系数4.2.3 举例&#xff1a; 小结&#xff1a; 1.介绍&#xff1a; Kano模型是一种质量…

C#常见内存泄漏

背景 在开发中由于对语言特性不了解或经验不足或疏忽&#xff0c;往往会造成一些低级bug。而内存泄漏就是最常见的一个&#xff0c;这个问题在测试过程中&#xff0c;因为操作频次低&#xff0c;而不能完全被暴露出来&#xff1b;而在正式使用时&#xff0c;由于使用次数增加&…

【JavaScript 基础入门】02 JavaScrip 详细介绍

JavaScrip 详细介绍 目录 JavaScrip 详细介绍1. JavaScript 是什么2. JavaScript的作用3. HTML/CSS/JS 的关系4. 浏览器执行 JS 简介5. JavaScript 的组成6. JavaScript 的特点 1. JavaScript 是什么 JavaScript&#xff0c;通常缩写为 JS&#xff0c;是一种高级的&#xff0c;…

【SpringSpringBoot】概述

Spring&SpringBoot专题 【注】&#xff1a; 本专题围绕框架核心概念展开&#xff0c;渐进式深入总结学习、面试、开发经验&#xff0c;集中整理便于回顾 持续补充与施工中~~~~ 1.发展史 2.基本架构 Spring框架的基本架构是一个分层架构&#xff0c;包括多个模块&#x…

STL---stackqueue

一、stack 1.stack的介绍 stack介绍文档 https://legacy.cplusplus.com/reference/stack/stack/?kwstack 1. stack是一种容器适配器&#xff0c;专门用在具有后进先出操作的上下文环境中&#xff0c;其删除只能从容器的一端进行元素的插入与提取操作。 2. stack是作为容器适…

AI技术大揭秘:探索人工智能的核心领域与必备技能

随着人工智能的不断进步&#xff0c;AI技术在各个领域都发挥着越来越关键的作用。想要成为AI领域的从业者&#xff0c;不仅需要对整体格局有清晰认识&#xff0c;更要掌握关键技术和必备技能。本文将深入解析AI的核心技术领域&#xff0c;以及在这个前沿领域里需要掌握的技能。…

Java_集合类

集合可以看作是一个容器&#xff0c;集合中的各个对象&#xff0c;很容易将其从集合中取出来&#xff0c;也很容易将其存放到集合中&#xff0c;还可以按照一定的顺序进行摆放。JAVA中提供了不同的集合类&#xff0c;这些类具有不同的存储对象的方式&#xff0c;同时提供了相应…

04-JVM虚拟机-课堂笔记

04-JVM虚拟机 1. JVM虚拟机概述 1.4 对象的创建流程与内存分配 1.4.1 创建流程 1.4.2 对象内存分配方式 内存分配的方法有两种&#xff1a;不同垃圾收集器不一样 指针碰撞(Bump the Pointer) 空闲列表(Free List) 分配方法说明收集器指针碰撞(Bump the Pointer)内存地址…

论机器生产内容MGC与新数字时代的两个世界

摘要&#xff1a;本文从新数字时代人类社会的两种存在形态&#xff1a;数字世界&#xff08;元宇宙&#xff09;与物理世界&#xff08;时空宇宙&#xff09;&#xff0c;以及新兴数字产业&#xff1a;机器生产内容MGC的发展、现状与未来出发&#xff0c;通过对新数字时代及两个…

【MIdjourne基础】 |MIdjourney基础参数全解析,各类辅助知识

文章目录 1 参数列表1.1 基础参数列表 2 基础参数详解2.1 模型版本选择2.2 模型出图模式选择2.3 基础生图参数2.3.1 --ar2.3.2 --stylize2.3.3 --no2.3.4 --chaos2.3.5 --quality2.3.6 --stop2.3.7 --hd2.3.8 --repeat 1 参数列表 1.1 基础参数列表 模型版本选择 目标参数作…

什么是微服务?(微服务的技术栈)

微服务是一种架构风格&#xff0c;它将一个单一的应用拆分为多个小型的服务&#xff0c;每个服务运行在自己的进程中&#xff0c;服务间采用轻量级的通信机制&#xff08;如HTTP/webservice等&#xff09;。这些服务围绕业务能力构建&#xff0c;并且可以全自动独立部署。微服务…

PageHelper 分页逻辑 源码解析

一、PageHelper PageHelper 是一个用于在 MyBatis 中进行分页查询的开源分页插件。它能够方便地帮助开发者处理分页查询的逻辑&#xff0c;简化代码&#xff0c;并提高开发效率。PageHelper 支持多种数据库&#xff0c;包括 MySQL、Oracle、PostgreSQL 等。 PageHelper 的实现…

了解OpenCV的数据类型

OpenCV是一个开源的计算机视觉库&#xff0c;广泛应用于图像和视频处理领域。在OpenCV中&#xff0c;数据类型扮演着非常重要的角色&#xff0c;它们决定了数据的存储方式和操作方式。本文将介绍OpenCV中常见的数据类型&#xff0c;包括图像数据类型、矩阵数据类型和轮廓数据类…

使用Python和ffmpeg旋转WebM视频并保存为MP4文件

简介: 在本篇博客中&#xff0c;我们将介绍如何使用Python编写一个程序&#xff0c;结合wxPython和ffmpeg模块&#xff0c;来旋转WebM视频文件并将其保存为MP4格式。我们将使用wxPython提供的文件选择对话框来选择输入和输出文件&#xff0c;并使用ffmpeg库来进行视频旋转操作。…

IS-IS:09 ISIS路由过滤

在IS-IS 网络中&#xff0c;有时需要使用 filter-policy 工具对 IS-IS 路由进行过滤。这里所说的过滤&#xff0c;是指路由器在将自己IS-IS 路由表中的某些 IS-IS 路由纳入进自己的 IP 路由表的过程&#xff0c;一些满足了过滤条件的 IS-IS 路由将被限制纳入 IP 路由表中。 需要…

程序员该懂的一些测试(四)测试覆盖率

测试覆盖率通常被用来衡量测试的充分性和完整性&#xff0c;从广义的角度来讲&#xff0c;测试覆盖率主要分 为两大类&#xff0c;一类是面向项目的需求覆盖率&#xff0c;另一类是更偏向技术的代码覆盖率。 需求覆盖率 需求覆盖率是指测试对需求的覆盖程度&#xff0c;通常的…

Linux 驱动开发基础知识——总线设备驱动模型(七)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;Vir2021GKBS &#x1f43c;本文由…

C++ //练习 3.5 编写一段程序从标准输入中读入多个字符串并将它们连接在一起,输出连接成的大字符串。然后修改上述程序,用空格把输入的多个字符串分隔开来。

C Primer&#xff08;第5版&#xff09; 练习 3.5 练习 3.5 编写一段程序从标准输入中读入多个字符串并将它们连接在一起&#xff0c;输出连接成的大字符串。然后修改上述程序&#xff0c;用空格把输入的多个字符串分隔开来。 环境&#xff1a;Linux Ubuntu&#xff08;云服务…

.NET高级面试指南专题三【线程和进程】

在C#中&#xff0c;线程&#xff08;Thread&#xff09;和进程&#xff08;Process&#xff09;是多任务编程中的重要概念&#xff0c;它们用于实现并发执行和多任务处理。 进程&#xff08;Process&#xff09;&#xff1a; 定义&#xff1a; 进程是正在运行的程序的实例&…