echart：图例legend底部显示【圆形+自定义icon+名称】

效果:

实现思路：前面的icon通过echart的配置项icon设置，自定义图标通过样式backgroundColor设置

legend配置信息

      legend: {
        show: true,
        data: [
          {
            name: 'Forest',
            icon: 'circle'
          },
          {
            name: 'Steppe',
            icon: 'circle',
          },
          {
            name: 'Banans',
            icon: 'circle',
          }
        ],

        formatter: (name) => {
          return `{${name}| }${name}`;
        },
        textStyle: {
          rich: {
            Forest: {
              borderRadius: 30,
              lineHight: 30,
              width: 30,
              fontSize: 30,
              backgroundColor: {
                image: 'https://img2.baidu.com/it/u=555227454,1852482860&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=388'
              }
            },
            Steppe: {
              borderRadius: 30,
              lineHight: 30,
              width: 30,
              fontSize: 30,
              backgroundColor: {
                image: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202108%2F04%2F20210804151623_3d204.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648221761&t=ee9144fc1f8ef16d2739f7ab26c8ac34'
              }
            }
          }
        }

      },