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

先看效果：

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