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

本文主要是介绍笔记：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属性自定义图例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---