笔记：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就行）