关于ANTV G2 中的图例问题

Question

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

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 = `<div style="color:#a3a3a3;font-size: 14px;text-align: center;width: 10em;">${this.title}
<span style="color:#2b2a29;font-size:20px">${this.titleNum}<span style="color:#2b2a29;">${this.titleCompany}

Answer 1

• 请看👉 ：antv G2使用问题