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

HaanLen

于 2022-02-26 11:31:50 发布

阅读量3.8k

点赞数

CC 4.0 BY-SA版权

分类专栏： Echart 文章标签： echarts 前端 javascript

本文链接：https://blog.youkuaiyun.com/weixin_40119412/article/details/123147375

Echart 专栏收录该内容

27 篇文章

订阅专栏

本文介绍了如何使用ECharts配置项设置图例的显示，并通过自定义背景颜色和图片来创建独特的图例效果。示例中展示了如何为不同数据系列设置不同的图标，并利用formatter函数定制显示文本。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果:
在这里插入图片描述
实现思路：前面的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'
              }
            }
          }
        }

      },