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传进去的方法,在调用的环境里按需处理事件。

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

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

相关文章

经典文献阅读之--FlashOcc(快速且内存高效的占用预测模块)

Tip: 如果你在进行深度学习、自动驾驶、模型推理、微调或AI绘画出图等任务,并且需要GPU资源,可以考虑使用UCloud云计算旗下的Compshare的GPU算力云平台。他们提供高性价比的4090 GPU,按时收费每卡2.6元,月卡只需要1.7元每小时&…

windows下编译linux的go程序报错gcc_linux_amd64.c: In function ‘_cgo_sys_thread_start‘:

报错解决 执行报错 报错解决 其他补充 windows下编译linux 64位程序 set GOARCHamd64 set GOOSlinux set CGO_ENABLED0 go build手把手教你实现Golang跨平台编译 报错解决其他补充windows下编译linux 64位程序Windows下编译Mac平台64位可执行程序:Linux 下编译…

webpack--压缩,代码的拆分,tree shinking

Terser 对代码进行压缩、丑化 const TerserPlugin require("terser-webpack-plugin");optimization: { minimize: true, //在开发环境下启用 CSS 优化minimizer: [new TerserPlugin({extractComments: false,terserOptions: {compress: {arguments: true,// 将函数…

Cursor是什么?基于ChatGPT代码编辑器的cursor如何使用?VS Code如何迁移到Cursor的步骤

Cursor是什么 Cursor 是一个基于 Visual Studio Code(VS Code)技术构建的高级代码编辑器,专为提高编程效率并更深度地整合 AI 功能而设计。它不仅继承了 VS Code 的强大功能和用户界面,还增加了专门针对 AI 支持的特色功能。 Cur…

UE5 渲染性能优化 学习笔记

主要考虑三个点: 1、灯光 2、半透明物体 3、后处理 1、Game:CPU对游戏代码的处理工作 2、Draw:CPU为GPU准备数据所做的工作 3、GPU Time:就是GPU所渲染需要花的时间 UE5的命令行指令 里面说明了某个指令有什么用处 以及启动…

英伟达SSD视觉算法分类代码解析

一、官方原代码 #!/usr/bin/env python3 # # Copyright (c) 2020, NVIDIA CORPORATION. All rights reserved. # # Permission is hereby granted, free of charge, to any person obtaining a # copy of this software and associated documentation files (the "Softwa…

【电路笔记】-电子放大器介绍

电子放大器介绍 文章目录 电子放大器介绍1、概述2、四极表示法3、理想模型4、真实放大器的限制5、噪音考虑因素6、电子放大器的类型1、概述 放大器是一种电子模块,可放大电位信号(电压放大器)、强度信号(电流放大器)或两者(功率放大器)。 放大器由两个输入组成,分别是…

开门预警系统技术规范(简化版)

开门预警系统技术规范(简化版) 1 系统概述2 预警区域3 预警目标4 功能需求5 功能条件6 显示需求7 指标需求1 系统概述 开门预警系统(DOW),在自车停止开门过程中,安装在车辆的传感器(如安装在车辆后保险杆两个角雷达)检测从自车后方接近的目标车(汽车、摩托车等)的相对…

Django面试题

1. 什么是wsgi? WSGI 是 “Web Server Gateway Interface” 的缩写,它是一种用于 Python Web 应用程序和 Web 服务器之间通信的标准接口。它定义了一组规则和约定,使 Web 服务器能够与任何符合 WSGI 规范的 Python Web 应用程序进行交互。 #…

2024年中级会计报名失败原因汇总❗

2024年中级会计报名失败原因汇总❗ ❌这四类考生不能报考24年中级⇩⇩⇩ 1️⃣不参加会计信息采集的同学 2️⃣未按规定完成继续教育的同学 3️⃣不符合会计工作年限要求的同学 4️⃣报名前未做好材料准备 需要准备有效期内身份证、本人学历或学位证书、户籍证或者居住证明、符…

翻转链表-链表题

LCR 141. 训练计划 III - 力扣(LeetCode) 非递归 class Solution { public:ListNode* trainningPlan(ListNode* head) {if(head ! nullptr && head->next ! nullptr){ListNode* former nullptr;ListNode* mid head;ListNode* laster nul…

C++ PDF转图片

C PDF转图片#include "include/fpdfview.h" #include <fstream> #include <include/core/SkImage.h>sk_sp<SkImage> pdfToImg(sk_sp<SkData> pdfData) {sk_sp<SkImage> img;FPDF_InitLibrary(nullptr);FPDF_DOCUMENT doc;FPDF_PAGE …

Character Region Awareness for Text Detection论文学习

​1.首先将模型在Synth80k数据集上训练 Synth80k数据集是合成数据集&#xff0c;里面标注是使用单个字符的标注的&#xff0c;也就是这篇文章作者想要的标注的样子&#xff0c;但是大多数数据集是成堆标注的&#xff0c;也就是每行或者一堆字体被整体标注出来&#xff0c;作者…

人工智能ChatGPT的多种应用:提示词工程

简介 ChatGPT 的主要优点之一是它能够理解和响应自然语言输入。在日常生活中&#xff0c;沟通本来就是很重要的一门课程&#xff0c;沟通的过程中表达的越清晰&#xff0c;给到的信息越多&#xff0c;那么沟通就越顺畅。 和 ChatGPT 沟通也是同样的道理&#xff0c;如果想要 …

33.星号三角阵(二)

上海市计算机学会竞赛平台 | YACSYACS 是由上海市计算机学会于2019年发起的活动,旨在激发青少年对学习人工智能与算法设计的热情与兴趣,提升青少年科学素养,引导青少年投身创新发现和科研实践活动。https://www.iai.sh.cn/problem/742 题目描述 给定一个整数 𝑛,输出一个…

专属部署简介

什么是专属部署 专属部署(也称为专用部署)是一种部署选择&#xff0c;它允许用户将数据和应用部署到自己的专用云基础架构中&#xff0c;而不是与其他租户共享基础架构。这种部署方式可以提供更高的安全性、控制力和性能优化&#xff0c;因为用户可以完全控制和管理自己的基础设…

大众点评全国爱车店铺POI采集177万家-2024年5月底

大众点评全国爱车店铺POI采集177万家-2024年5月底 店铺POI点位示例&#xff1a; 店铺id H69Y6l1Ixs2jLGg2 店铺名称 HEEJOO豪爵足道(伍家店) 十分制服务评分 7.7 十分制环境评分 7.7 十分制划算评分 7.7 人均价格 134 评价数量 2982 店铺地址 桔城路2号盛景商业广场1-3…

46【Aseprite 作图】发光

1 通过“编辑 - 特效 - 卷积矩阵”&#xff0c;这次选择“7*7”&#xff0c;可以做出窗户的效果

面试题:什么是线程的上下文切换?

线程的上下文切换是指在操作系统中&#xff0c;CPU从执行一个线程的任务切换到执行另一个线程任务的过程。在现代操作系统中&#xff0c;为了实现多任务处理和充分利用CPU资源&#xff0c;会同时管理多个线程的执行。由于CPU在任意时刻只能执行一个线程&#xff0c;因此需要在这…

【QT5】<知识点> IMX6ULL开发板运行QT

目录 1. 安装交叉编译器 2. 命令行交叉编译QT项目 3. 运行该可执行程序 4. 开发板上运行UDP程序与Ubuntu通信 1. 安装交叉编译器 第一步&#xff1a;进入正点原子论坛找到IMX6ULL开发板的资料&#xff0c;下载“开发工具”&#xff0c;将“交叉编译工具”中的fsl-imx-x11-…