echarts的toolbox自定义feature标签及事件

news2024/11/20 8:37:01

1. 需求

在使用echarts图时希望toolbox扩展一些自定义icon和点击事件,而不只是图中这些echarts提供的事件。
在这里插入图片描述

2. 文档

属性名类型描述
toolbox.featureObject各工具配置项。

feature中除了echarts提供的各个内置的工具按钮外,可以自定义工具按钮。

除了各个内置的工具按钮外,还可以自定义工具按钮。注意,自定义的工具名字,只能以my 开头, 比如myTool1,myTool2等。

3. 实际使用

{
    toolbox: {
        feature: {
            myTool1: {
                show: true,
                title: '自定义扩展方法1',
                icon: icon1,
                onclick: function (){
                    alert('myToolHandler1')
                }
            },
            myTool2: {
                show: true,
                title: '全屏',
                icon: 'image://https://echarts.apache.org/zh/images/favicon.png',
                onclick: function (){
                    alert('myToolHandler2')
                }
            }
        }
    }
}

4.实际效果

实际效果类似如下:
在这里插入图片描述

5.其他情况

echarts里如果实现全屏、取消全屏功能时需要修改icon,思路如下:
1.渲染echarts图是改变内容就切换,所以每次变更icon需要重新draw
2.渲染的方法单独处理,在vue中将this传进封装的方法,通过变量来控制用哪个icon
3.触发的点击事件之类的,应该使用this传进去的方法,在调用的环境里按需处理事件。

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

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

相关文章

矩阵练习2

48.旋转图像 规律: 对于矩阵中第 i行的第 j 个元素,在旋转后,它出现在倒数第i 列的第 j 个位置。 matrix[col][n−row−1]matrix[row][col] 可以使用辅助数组,如果不想使用额外的内存,可以用一个临时变量 。 还可以通…

ShardingSphere跨表查询报错

目录 一、场景简介二、报错信息三、SQL四、原因五、解决方法一、调整SQL,不使用子查询方法二、将子查询的SQL独立出来,后续连接逻辑由代码处理 一、场景简介 1、使用ShardingSphere按月份进行分表 2、单月查询正常(单表) 3、跨…

苹果AI一夜颠覆所有,Siri史诗级进化,内挂GPT-4o

苹果AI一夜颠覆所有,Siri史诗级进化,内挂GPT-4o 刚刚,苹果AI,正式交卷! 今天,苹果构建了一个全新AI帝国——个人化智能系统Apple Intelligence诞生,智能助手Siri迎来诞生13年以来的史诗级进化…

visual studio 2022使用全版本平台工具集

https://www.cnblogs.com/coolfan/p/15822057.html vs2022使用全版本平台工具集 关键词:visual studio 2022使用全版本平台工具集;vs2022使用vc60、vc6.0工具集;vs2022使用全部旧平台工具集 优点:用v60平台工具集编译出来的exe文件可以无依赖的运行在W…

Spring--Bean的作用域,生命周期

Bean的作用域 Bean的作用域有很多种,在Spring Framework中支持6种(其中有四种只有在web环境中才能生效),同时Spring还支持自定义Bean的范围。 Spring Framework中支持的6种范围: 作用域解释singleton每个Spring IoC…

Manav Garg:生成式人工智能时代的SaaS

随着Chatgpt推动的人工智能时代精神席卷全球,它将如何影响SaaS世界?SaaS创业公司将如何适应这个新时代? 新兴市场在哪里?虽然这种技术平台的转变将带来巨大的机会,但传统的印度SaaS剧本必须适应新的人工智能秩序。创始…

误操作全盘重新分区?数据恢复与防范策略全解析

一、全盘重新分区概述 全盘重新分区,指的是对硬盘或存储设备上的所有分区进行删除并重新创建新分区的操作。这一操作通常会导致原有分区中的数据被清除,给用户带来数据丢失的风险。在某些情况下,用户可能由于误操作或软件故障而进行了全盘重…

【ArcGISProSDK】OpenItemDialog打开文件对话框

打开单个文件 效果 代码 public async void OpenFunction() {// 获取默认数据库var gdbPath Project.Current.DefaultGeodatabasePath;OpenItemDialog openItemDialog new OpenItemDialog() { Title "打开要素文件",InitialLocation gdbPath,Filter ItemFilte…

2024军民两用智能装备技术展会:领略“5G边缘计算器”开启智能化数据处理新篇章

"占星者5G边缘计算器:开启智能化数据处理新篇章" 随着物联网和人工智能技术的迅猛发展,数据处理的需求日益增长,对计算设备的性能提出了更高的要求。在“2024年中国军民两用智能装备与通信技术产业展览会”上,占星者5G边…

教育小程序开发:技术实现与实践案例

随着信息技术的不断进步,教育小程序在教育领域的应用越来越广泛。教育小程序开发不仅可以提高教学效率,还能够提供个性化的学习体验。本文将以技术代码为例,详细介绍教育小程序开发的关键技术和实践案例,帮助开发者更好地理解和实…

数据结构与算法题目集(中文) 6-3 求链表的表长

该代码使用循环遍历链表来计算链表的长度。代码首先定义了一个整数变量i用于计数,并初始化为0。然后进入一个while循环,条件为链表L非空。在循环中,通过L L->Next来遍历链表中的每一个节点,并将计数变量i递增。最终返回计数变…

企业管理/市场经营/自我管理,500+个经典职场工具 . rar

​500N个实用管理工具包,精选人力资源从业者必备之132项工具、40个管理者实效管理工具、成功自我管理的29个工具、常见的9种营销分析工具等,成功自我管理必备工具。 与班主任联系,即可获得完整资料包! 1.PEST分析 2.五力分析 3.…

大一学生分享网络编程聊天室-简单私聊

每天过得充实,你将不会焦虑 ---同行者联盟 Socket 是一种规范(标准),封装了TCP协议的通信细节,使得我们使用它就可以完成与远端计算机的TCP链接,以及数据的传输。并且可以完成数据传输基于双向流的读写操作,Java语言…

【ARFoundation自学04】AR Tracked Image 图像追踪识别与对应类的调用

图像识别是很常用的AR功能!AR foundation 可以帮助我们轻松实现! 1.安装插件 首先还是在资源包中导入ARfoundation 。然后搭建基本的AR ARFoundation框架! 2.创建AR session 和XR origin结构! 3.然后在XR Origin 物体身上添加A…

GIS之arcgis系列07:conda环境下安装arcpy环境

首先将python27环境下的“Desktop10.8.pth”拷贝到anaconda环境下。 路径如下(仅参考): C:\Python27\ArcGIS10.8\Lib\site-packages\Desktop10.8.pth D:\Anaconda\Lib\site-packages 在anaconda prompt中穿创建一个新环境 conda create -…

flink standalone部署模式

standalone模式可以在单台机器以不同进程方式启动,也可以以多机器分布式方式启动。 任务的提交模式有三种:application mode、session model、per-job mode(1.4x版本后过时)。 注意区分任务的提交模式与集群的部署模式区别。 以…

idea从git拉取代码需要输入token问题解决

idea使用git 推送代码时,提示token问题,这是因为你的代码仓库是gitlab, 然后打开修改代码后推送时,会默认使用gitlab插件,所以提示输入token解决方式就是把gitlab插件取消使用这样就好了。 取消之后再进行拉取代码即可…

华为鲲鹏应用开发基础:鲲鹏处理器及关键硬件特性介绍(二)

1. 鲲鹏简介 1.1 鲲鹏处理器简介 鲲鹏处理器是华为自研的基于ARMv8指令集开发的数据中心级处理器 1.2 基于鲲鹏主板的多样化计算产品 1.3 基于鲲鹏920的华为TaiShan(泰山) 200服务器 1.3.1 TaiShan 2280服务器内部视图 1.3.2 TaiShan 2280服务器物理结构 1.3.3 TaiShan 2280服…

4_机械臂位姿求逆理论及代码计算

1、aubo arcs sdk poseInverse 使用例子 auto cur_pose rpc_cli->getRobotInterface(robot_name)->getRobotState()->getTcpPose();// 2.288083 0.035207 1.550335auto pose_inv rpc_cli->getMath()->poseInverse(cur_pose);//结果:0.118611 -0.57…

数据不归路?文件清理的后悔药,2个文件恢复技巧

手机已成为我们生活中不可或缺的重要工具,它不仅仅是一个通讯设备,更是我们存储个人信息、工作文件、照片和视频等宝贵资料的仓库。然而,生活中的意外总是难以预料,有时候我们可能会不小心删除重要的文件,或者因为手机…