笔记: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

相关文章

vue监听属性watch的用法及使用场景详解

《vue监听属性watch的用法及使用场景详解》watch是vue中常用的监听器,它主要用于侦听数据的变化,在数据发生变化的时候执行一些操作,:本文主要介绍vue监听属性watch的用法及使用场景... 目录1. 监听属性 watch2. 常规用法3. 监听对象和route变化4. 使用场景附Watch 的

C#中通过Response.Headers设置自定义参数的代码示例

《C#中通过Response.Headers设置自定义参数的代码示例》:本文主要介绍C#中通过Response.Headers设置自定义响应头的方法,涵盖基础添加、安全校验、生产实践及调试技巧,强... 目录一、基础设置方法1. 直接添加自定义头2. 批量设置模式二、高级配置技巧1. 安全校验机制2. 类型

SpringBoot AspectJ切面配合自定义注解实现权限校验的示例详解

《SpringBootAspectJ切面配合自定义注解实现权限校验的示例详解》本文章介绍了如何通过创建自定义的权限校验注解,配合AspectJ切面拦截注解实现权限校验,本文结合实例代码给大家介绍的非... 目录1. 创建权限校验注解2. 创建ASPectJ切面拦截注解校验权限3. 用法示例A. 参考文章本文

Vite 打包目录结构自定义配置小结

《Vite打包目录结构自定义配置小结》在Vite工程开发中,默认打包后的dist目录资源常集中在asset目录下,不利于资源管理,本文基于Rollup配置原理,本文就来介绍一下通过Vite配置自定义... 目录一、实现原理二、具体配置步骤1. 基础配置文件2. 配置说明(1)js 资源分离(2)非 JS 资

聊聊springboot中如何自定义消息转换器

《聊聊springboot中如何自定义消息转换器》SpringBoot通过HttpMessageConverter处理HTTP数据转换,支持多种媒体类型,接下来通过本文给大家介绍springboot中... 目录核心接口springboot默认提供的转换器如何自定义消息转换器Spring Boot 中的消息

Python如何调用另一个类的方法和属性

《Python如何调用另一个类的方法和属性》在Python面向对象编程中,类与类之间的交互是非常常见的场景,本文将详细介绍在Python中一个类如何调用另一个类的方法和属性,大家可以根据需要进行选择... 目录一、前言二、基本调用方式通过实例化调用通过类继承调用三、高级调用方式通过组合方式调用通过类方法/静

Python学习笔记之getattr和hasattr用法示例详解

《Python学习笔记之getattr和hasattr用法示例详解》在Python中,hasattr()、getattr()和setattr()是一组内置函数,用于对对象的属性进行操作和查询,这篇文章... 目录1.getattr用法详解1.1 基本作用1.2 示例1.3 原理2.hasattr用法详解2.

Python自定义异常的全面指南(入门到实践)

《Python自定义异常的全面指南(入门到实践)》想象你正在开发一个银行系统,用户转账时余额不足,如果直接抛出ValueError,调用方很难区分是金额格式错误还是余额不足,这正是Python自定义异... 目录引言:为什么需要自定义异常一、异常基础:先搞懂python的异常体系1.1 异常是什么?1.2

Linux中的自定义协议+序列反序列化用法

《Linux中的自定义协议+序列反序列化用法》文章探讨网络程序在应用层的实现,涉及TCP协议的数据传输机制、结构化数据的序列化与反序列化方法,以及通过JSON和自定义协议构建网络计算器的思路,强调分层... 目录一,再次理解协议二,序列化和反序列化三,实现网络计算器3.1 日志文件3.2Socket.hpp

C语言自定义类型之联合和枚举解读

《C语言自定义类型之联合和枚举解读》联合体共享内存,大小由最大成员决定,遵循对齐规则;枚举类型列举可能值,提升可读性和类型安全性,两者在C语言中用于优化内存和程序效率... 目录一、联合体1.1 联合体类型的声明1.2 联合体的特点1.2.1 特点11.2.2 特点21.2.3 特点31.3 联合体的大小1