关于antv g2 的图例问题

关于antv g2 图例 这个使用图例跟环形 结合 但是图例的宽度无法设置 只能设置 整体的Chart的宽度 加padding的话只能控制 环图的大小 使用偏移量 也不行 也只是改变位置 图例的宽度设置不了

img


<script>
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: '具有控制力的', value: 501.9 },
        { type: 'Czech Republic', value: 301.9 },
        { type: 'Ireland', value: 201.1 },
        { type: 'Germany', value: 165.8 },
        { type: 'Australia', value: 139.9 },
        { type: '具有控制力33.33%~50%', value: 128.3 },
        { type: 'UK', value: 99 },
        { type: 'Belgium', value: 60 },
        { type: 'The Netherlands', value: 50 }
      ]

      // 可以通过调整这个数值控制分割空白处的间距，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: [20,20,20,-200],
      })

      // 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}<br><span style="color:#2b2a29;font-size:20px">${this.titleNum}</span><span style="color:#2b2a29;">${this.titleCompany}</span></div>`
      const titleHtml = `<div style="color:#333333;font-size: 20px;text-align: center;width: 10em;">${this.titleNum}<span style="font-size:14px;color:#2b2a29;">${this.titleCompany}</span></div>`
      chart.annotation().html({
        position: ['50%', '50%'],
        html: this.title ? html : titleHtml,
        alignX: 'middle',
        alignY: 'middle'
      })

      chart.legend({
        position: 'right',
        offsetX: -100,
        offsetY: 0,
        // itemHeight:10,
        // itemWidth:200,
        itemName: {
          formatter (text, item, index) {
            // console.log('item',item);
            const val =  (data[index].value / 100).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()
    }
  }
}
</script>

<style lang="less" scoped>

</style>