关于ANTV G2 中的图例问题

在antv g2 中的图例 二个问题 一 要怎么增加图例的 垂直间距啊 百度没百度到 文档好像也没有说 只有一个水平间距 二 还有图例右边会自动省略不知道怎么弄 宽度是够的

img


import { Chart, registerShape } from '@antv/g2'

export default {
  // 宽 高  图例显示  标题 标题数字 单位
  props: ['width', 'height', 'legendShow', 'title', 'titleNum', 'titleCompany'],
  data () {
    return {}
  },
  mounted () {
    console.log('---------------yuan ayuna ')
    this.init()
  },
  methods: {
    init () {
      const data = [
        { type: '具有控制力100%', value: 501.9 },
        { type: '具有控制力>=55%', value: 301.9 },
 
        { type: '具有控制力33.33%~50%', value: 128.3 },
        { type: '具有控制力<33.33%', value: 201.1 },

  
      ]

      // 可以通过调整这个数值控制分割空白处的间距，0-1 之间的数值
      const sliceNumber = 0.003

      // 自定义 other 的图形，增加两条线
      registerShape('interval', 'slice-shape', {
        draw (cfg, container) {
          const points = cfg.points
          let path = []
          path.push(['M', points[0].x, points[0].y])
          path.push(['L', points[1].x, points[1].y - sliceNumber])
          path.push(['L', points[2].x, points[2].y - sliceNumber])
          path.push(['L', points[3].x, points[3].y])
          path.push('Z')
          path = this.parsePath(path)
          return container.addShape('path', {
            attrs: {
              fill: cfg.color,
              path
            }
          })
        }
      })

      const chart = new Chart({
        container: 'container',
        // autoFit: true,
        height: this.height,
        width: this.width,
        padding: [0, 20, 0, -300]
      })

      // chart.forceFit()
      chart.data(data)
      chart.coordinate('theta', {
        radius: 1,
        innerRadius: 0.8
      })
      chart.tooltip({
        showTitle: false,
        showMarkers: false
      })

      // 辅助文本
      const html = `
"color:#a3a3a3;font-size: 14px;text-align: center;width: 10em;">${this.title}
"color:#2b2a29;font-size:20px">${this.titleNum}"color:#2b2a29;">${this.titleCompany}
`
      const titleHtml = `
"color:#333333;font-size: 20px;text-align: center;width: 10em;">${this.titleNum}"font-size:14px;color:#2b2a29;">${this.titleCompany}
`
      chart.annotation().html({
        position: ['50%', '50%'],
        html: this.title ? html : titleHtml,
        alignX: 'middle',
        alignY: 'middle'
      })

      chart.legend({
        position: 'right',
        offsetX: -150,
        offsetY: 0,
        itemSpacing: 100,
     
        itemName: {
          formatter (text, item, index) {
            // console.log('item',item);
            const val = (data[index].value / 10).toFixed(1) + '%'
            return `${text}   |   ${val}`
          },
          style: {
            // fill: 'red',
          }
        }



      })

      chart.interval().adjust('stack').position('value').color('type').shape('slice-shape')

      chart.theme({
        styleSheet: {
          brandColor: '#F87B7B',
          paletteQualitative10: ['#F87B7B', '#FFA573', '#FFD069', '#C8E081', '#8DE0F3', '#9AC3FF', '#CFB1FE']
        }
      })
      chart.render()
    }
  }
}