统计图图例legend实现多行分页（react+antV g2）

由于图例过多，所以需要做分页，但是echarts默认单行分页，产品的需求希望两行或者三行一页

效果图：

 

 

可能是我没有在echarts文档中找到，所以选择了antV G2 ，首先

npm i @antv/g2 --save

import React, { Component } from 'react'
import { Chart } from '@antv/g2'


let chart
export default class ProblemG2Chart extends Component<any> {

    componentDidMount() {
        chart = new Chart({
            container: 'problem-g2-chart',
            autoFit: true,
            padding: [-30, 0, 0, 0]
        })
        this.init()
    }
    
    componentDidUpdate(prevProps) {
        if (this.props.data !== prevProps.data) {
            this.init()
        }
    }

    componentWillUnmount() {
        // 清空
        if (chart) {
          chart.clear()
        }
    }

    init = () => {
        this.initChart()
    }
    
    initChart = async () => {
        // 载入数据源
        let series = this.props.data||[
            {
                "name": "晃动",
                "value": 4,
                "id": "64005a5f9eb052f2dd49e2f5"
            },
            ...
            {
                "name": "起步晚",
                "value": 2,
                "id": "64005c2174bd330c29795599"
            }
        ]
        
        if (!series.length) {
          return
        }
        chart.data(series).coordinate('theta', {
          radius: 0.4//饼图的半径
        })
        chart.tooltip({
          showTitle: false,
          showMarkers: false
        })
        chart
          .interval()
          .adjust('stack')
          .position('value')
          .color('name')
          .label('name', {
            layout: [
              { type: 'pie-spider' },
              {
                type: 'limit-in-plot',
                cfg: { action: 'ellipsis' /** 或 translate */ }
              }
            ],
            labelHeight: 15
          })
          .tooltip('name*value', (name, value) => {
            return {
              name,
              value
            }
          })
        chart.legend({
              maxRow: 2,//当图例项过多分页时，可以设置最大行数（仅适用于 layout:                                     'horizontal'），默认为：1。
                  itemSpacing:10,//控制图例项水平方向的间距。
              marker:{//图例项的 marker 图标配置
                  symbol:'square'
              }
          })
        chart.interaction('element-active')
        chart.on('element:click', (evt) => {
              const { type, view, gEvent, data, x, y, clientX, clientY } = evt;
              // type 事件名称
              // view 触发事件的 View 实例
              // gEvent 底层渲染引擎 G 的事件实例
              // data 对于点击图形的时候，这里会包含有点击图形的数据
              // x,y 鼠标点击位置
              // clientX, clientY 鼠标点击 client 位置
              const { target } = gEvent;
              // target 实际触发点击的 G UI 实例
              console.log(type, view, data, x, y, clientX, clientY,target);
        });
        chart.render()
      }
        
        render() {
            return (
              <div
                id={this.props.title}
                style={{ width: '50%', height: '300px', position: 'relative' }}
              >
                <div
                  className="title"
                  style={{
                    position: 'absolute',
                    width: '100%',
                    fontSize: '18px',
                    fontWeight: '800',
                    textAlign: 'center'
                  }}
                >
                  接管问题描述分布
                </div>
              </div>
        )
  }
}