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