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

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.mzph.cn/pingmian/23806.shtml

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

相关文章

电脑ip地址查询:快速定位你的网络位置(4种方法)

在互联网的浩瀚海洋中,每台联网的电脑都有一个独特的身份标识,那就是IP地址。无论是进行网络通信、定位问题还是安全防护,了解自己或他人的电脑IP地址都是非常关键的。那么,电脑ip地址查询怎么操作呢?本文将为你提供一…

学习笔记——路由网络基础——缺省(默认)路由

3、缺省(默认)路由 1、定义 缺省路由(默认路由):是目的地址和掩码都为全0的特殊路由。全0代表任意网络。缺省路由在路由表中的形式为:0.0.0.0/0缺省路由也被叫默认路由。缺省路由优先级比直连路由低 缺省路由是一种特殊的路由,当报文没有在…

Redis系列之淘汰策略介绍

Redis系列之淘汰策略介绍 文章目录 为什么需要Redis淘汰策略?Redis淘汰策略分类Redis数据淘汰流程源码验证淘汰流程Redis中的LRU算法Redis中的LFU算法 为什么需要Redis淘汰策略? 由于Redis内存是有大小的,当内存快满的时候,又没有…

【Qt】TreeWidget中Item的UserCheckable注意事项,没有出现多选框

1. 异常 开启 ItemIsUserCheckable以后,界面上没有出现多选框。 QTreeWidgetItem *item new QTreeWidgetItem();item->setText(0, "hello");item->setFlags(Qt::ItemIsUserCheckable | Qt::ItemIsSelectable |Qt::ItemIsEnabled | Qt::ItemIsAuto…

AIGC 介绍与典型应用与亚马逊科技AIGC方案

1、AIGC ( 生成式人工智能 ) 是指可生成全新内容的人工智能技术 从字面意思来看,AIGC 是继 PGC,UGC 之后的新型内容创作方式,可以在创意、表现力、迭代、传播、个性化等方面,充分发挥技术优势,打造新的数字内容生成与…

AXI Quad SPI IP核AXI4接口下的三种操作模式

当选择Enable Performance Mode选项时,AXI4接口包括在内。在该模式下,IP核可以在增强模式下操作(未选择启用XIP模式)或XIP模式(选择启用XIP模式)。在性能模式下,AXI4接口用于在DTR和DRR位置的突…

ActiveMQ 介绍、下载、安装和控制台

ActiveMQ 介绍 Apache ActiveMQ 是一款非常成熟且功能全面的开源消息中间件,由Apache软件基金会维护。它遵循 Java Message Service (JMS) 规范,这意味着它提供了一组标准的 API,允许 Java 应用程序以一种标准化的方式发送和接收消息。 以下…

游戏研发(策略+sass+回调模式)

前言 由于这边需要对接游戏研发后台,基本就是开服,封禁.角色日志等,但是每个游戏提供的接口都是不一样的,所以为了统一处理提前进行sass封装,以便后续可以更好的兼容 同时还涉及了多数据源的问题,因为有些日志太大不可能直接去http调用,会使用直接查询游戏研发的数据库方式这一…

前端修改接口返回测试工具 Inssman使用教程

之前用的requestly现在要登录才能用了,然后我又登录不上去,同事又推荐了个谷歌插件,试了下,挺好用,还不用登录,用法和之前差不多 下载网站:https://chromewebstore.google.com/detail/inssman-…

从入门到精通:Java Lambda运算符详解!

哈喽,各位小伙伴们,你们好呀,我是喵手。运营社区:C站/掘金/腾讯云;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点,并以文字的形式跟大家一起交流,互相学习,一…

力扣 503. 下一个更大元素 II

题目来源:https://leetcode.cn/problems/next-greater-element-ii/description/ C题解:因为是循环数组,所以对数组进行了两次遍历,相当于循环。使用了栈,一个存放元素,一个存放索引,用来更新res…

【C++ | 析构函数】类的析构函数详解

😁博客主页😁:🚀https://blog.csdn.net/wkd_007🚀 🤑博客内容🤑:🍭嵌入式开发、Linux、C语言、C、数据结构、音视频🍭 ⏰发布时间⏰:2024-06-06 1…

使用MFC DLL

本文仅供学习交流,严禁用于商业用途,如本文涉及侵权请及时联系本人将于及时删除 应用程序与DLL链接后,DLL才能通过应用程序调用运行。应用程序与DLL链接的方式主要有如下两种:隐式链接和显式链接。 隐式链接又称为静态加载&…

Linux常见故障处理之df命令卡住不输出

一、背景说明 朋友咨询Linux系统下输入df -h命令后没有任何输出结果,博主的第一反应是/根分区磁盘空间满了,朋友说cd等其他命令可以执行。博主又猜测可能是有人误定义了命令别名,进一步确认命令卡住在等待输出页面。事后博主想起来可能是共享…

代码随想录——删除二叉搜索树中的节点(Leetcode450)

题目链接 递归 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) {* …

JavaSE—泛型

1 泛型定义和基本使用 泛型是JDK1.5以后才有的, 可以在编译时期进行类型检查,且可以避免频繁类型转化! Test public void test1() {List list new ArrayList();list.add("ZhangSan");list.add(1);//集合使用 取出元素Object obj…

R语言数据探索和分析22-使用随机森林和聚类算法探索和预测健康状况

一、研究背景 在两个实验中,使用了一组综合性的生物统计数据来探索和预测健康状况(特别是疾病的发生)。实验的核心在于应用高级数据分析技术,具体包括随机森林分类和聚类分析,来洞察和预测个体的健康状况。首先&#…

【十大排序算法】选择排序

选择就像是在谱曲,每个决定就是一个音符,只有将它们有序地安排在一起,才能奏响美妙的乐章。 文章目录 一、选择排序的思想二、选择排序的发展历程三、选择排序具象化四、选择排序算法实现五、选择排序的特性推荐阅读 一、选择排序的思想 选…

详解大厂实时数仓建设V4.0

一、实时数仓建设背景 1. 实时需求日趋迫切 目前各大公司的产品需求和内部决策对于数据实时性的要求越来越迫切,需要实时数仓的能力来赋能。传统离线数仓的数据时效性是 T1,调度频率以天为单位,无法支撑实时场景的数据需求。即使能将调度频…

参数传递和剪枝,从修剪二叉树谈起

669. 修剪二叉搜索树 - 力扣(LeetCode) 一、参数传递 Java中的参数传递方式只有一种,那就是值传递。如果我们传的是基本数据类型,那么函数接收到的就是该数据的副本,如果我们传的是对象,那么函数接收到的就…