G2环形图legend图例使用滚动条可滑动

最新推荐文章于 2024-05-11 15:48:27 发布

小胖龙

最新推荐文章于 2024-05-11 15:48:27 发布

阅读量5.9k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： G2/Echarts

本文链接：https://blog.youkuaiyun.com/weixin_42275932/article/details/90519213

G2/Echarts 专栏收录该内容

3 篇文章

订阅专栏

这篇博客展示了如何在G2环形图中使用带有滚动条的legend图例，通过链接提供了详细的G2手册，帮助读者理解并实现这一功能。

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

先看效果：
在这里插入图片描述

this.chart.legend({
          // marker: 'square',
          position: 'right-center',
          // textStyle: { fill: '#a3a9c1' },
          // offsetX: 20,
          itemFormatter(val) {
            let labe = data.find(v => v.content == val).percent
            return `${val} ${parseInt(labe / sum * 100)}%` // val 为每个图例项的文本值}else{
          },
          useHtml: true,//使用Html绘制图例
          flipPage: true,//图例超出容器是否滚动
          containerTpl: '<div class="g2-legend" style="position:absolute;top:20px;right:60px;width:auto;">'
            + '<h4 class="g2-legend-title"></h4>'
            + '<ul class="g2-legend-list" style="list-style-type:none;margin:0;padding:0;"></ul>'
            + '</div>',//图例容器
          itemTpl: '<li class="g2-legend-list-item item-{index} {checked}" style="margin-right: 24px" data-color="{originColor}" data-value="{originValue}">' +
            '<i class="g2-legend-marker" style="background-color:{color};"></i>' +
            '<span class="g2-legend-text">{value}</span></li>'//图例
        })

具体可以去看G2手册legendhttps://www.yuque.com/antv/g2-docs/api-chart#legend