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

相关文章

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》:本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定

如何自定义Nginx JSON日志格式配置

《如何自定义NginxJSON日志格式配置》Nginx作为最流行的Web服务器之一,其灵活的日志配置能力允许我们根据需求定制日志格式,本文将详细介绍如何配置Nginx以JSON格式记录访问日志,这种... 目录前言为什么选择jsON格式日志?配置步骤详解1. 安装Nginx服务2. 自定义JSON日志格式各

Android自定义Scrollbar的两种实现方式

《Android自定义Scrollbar的两种实现方式》本文介绍两种实现自定义滚动条的方法,分别通过ItemDecoration方案和独立View方案实现滚动条定制化,文章通过代码示例讲解的非常详细,... 目录方案一:ItemDecoration实现(推荐用于RecyclerView)实现原理完整代码实现

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处

基于Spring实现自定义错误信息返回详解

《基于Spring实现自定义错误信息返回详解》这篇文章主要为大家详细介绍了如何基于Spring实现自定义错误信息返回效果,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录背景目标实现产出背景Spring 提供了 @RestConChina编程trollerAdvice 用来实现 HTT

SpringSecurity 认证、注销、权限控制功能(注销、记住密码、自定义登入页)

《SpringSecurity认证、注销、权限控制功能(注销、记住密码、自定义登入页)》SpringSecurity是一个强大的Java框架,用于保护应用程序的安全性,它提供了一套全面的安全解决方案... 目录简介认识Spring Security“认证”(Authentication)“授权” (Auth

HTML5 data-*自定义数据属性的示例代码

《HTML5data-*自定义数据属性的示例代码》HTML5的自定义数据属性(data-*)提供了一种标准化的方法在HTML元素上存储额外信息,可以通过JavaScript访问、修改和在CSS中使用... 目录引言基本概念使用自定义数据属性1. 在 html 中定义2. 通过 JavaScript 访问3.

CSS模拟 html 的 title 属性(鼠标悬浮显示提示文字效果)

《CSS模拟html的title属性(鼠标悬浮显示提示文字效果)》:本文主要介绍了如何使用CSS模拟HTML的title属性,通过鼠标悬浮显示提示文字效果,通过设置`.tipBox`和`.tipBox.tipContent`的样式,实现了提示内容的隐藏和显示,详细内容请阅读本文,希望能对你有所帮助... 效

SpringBoot自定义注解如何解决公共字段填充问题

《SpringBoot自定义注解如何解决公共字段填充问题》本文介绍了在系统开发中,如何使用AOP切面编程实现公共字段自动填充的功能,从而简化代码,通过自定义注解和切面类,可以统一处理创建时间和修改时间... 目录1.1 问题分析1.2 实现思路1.3 代码开发1.3.1 步骤一1.3.2 步骤二1.3.3

dubbo3 filter(过滤器)如何自定义过滤器

《dubbo3filter(过滤器)如何自定义过滤器》dubbo3filter(过滤器)类似于javaweb中的filter和springmvc中的intercaptor,用于在请求发送前或到达前进... 目录dubbo3 filter(过滤器)简介dubbo 过滤器运行时机自定义 filter第一种 @A