笔记:Echarts的legend属性自定义图例

2024-01-06 12:32

本文主要是介绍笔记:Echarts的legend属性自定义图例,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

✈废话不多说直接上才艺:
 

1.更换自带的样式 比如:圆形,正方形...

legend: {top: "0%",right: "5%",textStyle: {fontSize: "12px",color: "yellow"},itemWidth: 20,itemHeight: 10,// 👇👇👇👇👇👇👇👇👇👇data: [{name: "各地市客户总量",icon:"reat"  //正方形},{name: "当月客户新增量",icon:"circle"   //圆形}]//👆👆👆👆👆👆👆👆👆👆},

2.自定义图例:→语法:icon:"image://+icon文件地址"

legend: {top: "0%",right: "5%",textStyle: {fontSize: "12px",color: "yellow"},itemWidth: 20,itemHeight: 10,//👇👇👇👇👇👇👇👇👇👇👇👇data: [{name: "各地市客户总量",icon:"image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAAAzCAIAAABtzwN3AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAAGkSURBVGiB7ZRJjhwxEAOD0i/m///y3Z+gD8pUqRaf50KgURC0MDd26OfPX2DAEIP+iQEThKc08LXv85R5vfJ43IT5reyJhOe5/7o5xcADDfzY14fyLfp81XK89Vyad2UAJHsvwRYYS7INqoPb0hK2AWMkbCFAEkbIgKCUTSnLWKyIH3G5lEUpLyEk2S3Z0cG6R1/bHd1b3x0dqXNGqLtgS3u5mrISteiELm12AZIArdMlDbarTaVWafSdJWNJq+A6XMNYZdS346oC22bPoqK7Wqnd3NXE/Uj3nL2y1doSxmOVsWu8JrZEd0JdzYqro7unF94T08fE4ND0dll1g936PbfDC53g5QXxcJlqPP2IPq0cXnE13BPWNbGeSfV1T8x0pW6vPbzw/4nxOTHomWyX9c2K+/TC8b88lN9ObOXdiMtfb+VwIVwIF8KFcCFcCBfChZvLwoVwIVwIF8KFcCFcCBfChXAhXAgXTpeFC+FCuBAuhAvhQrgQLoQL4UK4EC6EC+FCuBAuhAvhQriwXVbdCBfChXAhXNguq26EC+FCuPDLXPgH36i7sjWR2A0AAAAASUVORK5CYII="},{name: "当月客户新增量",icon: "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAAApCAIAAADcVWJ+AAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAEXRFWHRTb2Z0d2FyZQBTbmlwYXN0ZV0Xzt0AAACgSURBVGiB7dmxCYAwFAbhpwRBBAUbJ3AH57BxGhdzDDfQ1iUsrL02Ke5r0v4cvCrVOG+hH3XuAUWzDrEOsQ6xDrEOsQ6xDrEOsQ6xDrEOsQ6xDkkR0Q1T7hmFShHRtP2y7rmXFOe5Ty+LWIdYh1iHWIdYh6Tvuc4j744yVf5nAS+LWIdYh1iHWIdYh1iHWIdYh1iHWIdYh1iHWIdYh1iHvGb3B9SshSXQAAAAAElFTkSuQmCC"}]//👆👆👆👆👆👆👆👆👆👆👆},

注意 :我这里使用的是base64图片格式。

(有时候使用相对地址无法显示等问题 切换成base64就行)

这篇关于笔记:Echarts的legend属性自定义图例的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/576365

相关文章

springboot自定义注解RateLimiter限流注解技术文档详解

《springboot自定义注解RateLimiter限流注解技术文档详解》文章介绍了限流技术的概念、作用及实现方式,通过SpringAOP拦截方法、缓存存储计数器,结合注解、枚举、异常类等核心组件,... 目录什么是限流系统架构核心组件详解1. 限流注解 (@RateLimiter)2. 限流类型枚举 (

SpringBoot 异常处理/自定义格式校验的问题实例详解

《SpringBoot异常处理/自定义格式校验的问题实例详解》文章探讨SpringBoot中自定义注解校验问题,区分参数级与类级约束触发的异常类型,建议通过@RestControllerAdvice... 目录1. 问题简要描述2. 异常触发1) 参数级别约束2) 类级别约束3. 异常处理1) 字段级别约束

spring中的@MapperScan注解属性解析

《spring中的@MapperScan注解属性解析》@MapperScan是Spring集成MyBatis时自动扫描Mapper接口的注解,简化配置并支持多数据源,通过属性控制扫描路径和过滤条件,利... 目录一、核心功能与作用二、注解属性解析三、底层实现原理四、使用场景与最佳实践五、注意事项与常见问题六

Linux线程之线程的创建、属性、回收、退出、取消方式

《Linux线程之线程的创建、属性、回收、退出、取消方式》文章总结了线程管理核心知识:线程号唯一、创建方式、属性设置(如分离状态与栈大小)、回收机制(join/detach)、退出方法(返回/pthr... 目录1. 线程号2. 线程的创建3. 线程属性4. 线程的回收5. 线程的退出6. 线程的取消7.

SpringBoot+EasyExcel实现自定义复杂样式导入导出

《SpringBoot+EasyExcel实现自定义复杂样式导入导出》这篇文章主要为大家详细介绍了SpringBoot如何结果EasyExcel实现自定义复杂样式导入导出功能,文中的示例代码讲解详细,... 目录安装处理自定义导出复杂场景1、列不固定,动态列2、动态下拉3、自定义锁定行/列,添加密码4、合并

python删除xml中的w:ascii属性的步骤

《python删除xml中的w:ascii属性的步骤》使用xml.etree.ElementTree删除WordXML中w:ascii属性,需注册命名空间并定位rFonts元素,通过del操作删除属... 可以使用python的XML.etree.ElementTree模块通过以下步骤删除XML中的w:as

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

Python打印对象所有属性和值的方法小结

《Python打印对象所有属性和值的方法小结》在Python开发过程中,调试代码时经常需要查看对象的当前状态,也就是对象的所有属性和对应的值,然而,Python并没有像PHP的print_r那样直接提... 目录python中打印对象所有属性和值的方法实现步骤1. 使用vars()和pprint()2. 使

CSS3中的字体及相关属性详解

《CSS3中的字体及相关属性详解》:本文主要介绍了CSS3中的字体及相关属性,详细内容请阅读本文,希望能对你有所帮助... 字体网页字体的三个来源:用户机器上安装的字体,放心使用。保存在第三方网站上的字体,例如Typekit和Google,可以link标签链接到你的页面上。保存在你自己Web服务器上的字