echarts图例分页+图里颜色前十固定剩下随机

分页

前端需要写一个假分页，而统计图是一个组件。echarts官网有图例分页。通过加type：scroll就可以实现，但是图例为一行，并不是两行，所以样式不允许。
而实现两行图例我的方法是将legend用为数组，里面加两条数据。

两个data分别代表上下两行的数据。
思考

tsakKanban为父组件传入的统计图数值，比如tsakKanban传入了53条数据，而[0,53]为全集，[0,10][10,20][20,30],[30,40][40,43]为[0,53]的子集，所以我应该把全集分为十条一组。
但是我应该怎么动态的去获取10,20,30的数据呢，所以pageNum（当前所在页）为变量，10为每页数量，pageNum*10则为当前页的十条数据。所以我使用了map循环。

this.state.tsakKanban.map((item,index)=>{
            if((pageNum-1)*10<index+1&&index+1<=pageNum*10){
            //通过index去获取在子集区间的数值，index+1是因为pageNum为1开始的
                legendList.push(item.name)
            }
        })

而左右两个箭头

//图例上一页
    ptop=()=>{
        if(this.state.pageNum>1){
            this.setState({
                pageNum:this.state.pageNum-1
            })
        }
    }

//图例下一页
pbottom=()=>{
        let upNumber=Math.ceil(this.state.tsakKanban.length/10)
        if(this.state.pageNum<upNumber){
            this.setState({
                pageNum:this.state.pageNum+1
            })
        }
    }

注意：：子组件监听父组件值

componentWillReceiveProps(props) {
        this.setState({
            pageNum:props.pageNum,
            tsakKanban: props.tsakKanban,
        })
    }

图例颜色前十固定，之后随机

randomHexColor() { //随机生成十六进制颜色
        var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
        while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
            hex = '0' + hex;
        }
        return '#' + hex; //返回‘#'开头16进制颜色
    }

饼状图完整代码

/*培训计划中任务使用情况总览*/
import React from 'react'
import ReactEcharts from 'echarts-for-react';
import Styles from '../index.module.scss'

class RegistrationStatus extends React.Component {
    state = {
        tsakKanban: [],
        legendList:[],
        pageNum:1,
    }

    componentDidMount() {
        let data = this.props.tsakKanban
        console.log(this.props)
        if (!data?.some(item=>item.value!==0)) {
            data.push({
                value: 1, name: ''
            })
        }
        this.setState({
            tsakKanban: data,
            pageNum:this.props.pageNum
        })
    }
    componentWillReceiveProps(props) {
        this.setState({
            pageNum:props.pageNum,
            tsakKanban: props.tsakKanban,
        })
    }

    randomHexColor() { //随机生成十六进制颜色
        var hex = Math.floor(Math.random() * 16777216).toString(16); //生成ffffff以内16进制数
        while (hex.length < 6) { //while循环判断hex位数，少于6位前面加0凑够6位
            hex = '0' + hex;
        }
        return '#' + hex; //返回‘#'开头16进制颜色
    }
    optionPie = () => { // 饼状图
        const {tsakKanban,pageNum} = this.state
        let legendList=[]
        let colorList=[]
        this.state.tsakKanban.map((item,index)=>{
            if((pageNum-1)*10<index+1&&index+1<=pageNum*10){
                legendList.push(item.name)
            }
        })
        for (let i=0;i<this.state.tsakKanban.length-10;i++){
            colorList.push(this.randomHexColor())
        }
        return {
            color: [ '#4C6DFA', '#FFE960', '#23B899', '#FF7062','#966CFC','#FF94C0','#5AD8A6',
                "#23C1FF","#7BFFE7","#13C2C2"].concat(colorList),
            legend: [
                {
                    data:legendList.length>5?legendList.slice(0,5):legendList,
                    icon: "circle",
                    itemWidth: 10,  // 设置宽度
                    itemHeight: 20, // 设置高度
                    itemGap: 30,
                    width:767,
                    height:40,
                    x: "center",
                    bottom: '8%',
                    textStyle: { //图例文字的样式
                        color: '#333',
                        fontSize: 14
                    },
                },
                {
                    data:legendList.length>5?legendList.slice(5,10):[],
                    icon: "circle",
                    itemWidth: 10,  // 设置宽度
                    itemHeight: 20, // 设置高度
                    itemGap: 30,
                    width:767,
                    height:40,
                    x: "center",
                    y:"bottom",
                    textStyle: { //图例文字的样式
                        color: '#333',
                        fontSize: 14
                    },
                },
            ],
            tooltip: {
                textStyle:{
                    fontSize:14,
                    color:'#fff'
                },
                backgroundColor: 'rgba(51, 51, 51, 0.7)',
                // borderColor: 'rgba(51, 51, 51, 0.7)',
                borderWidth:0,
                trigger: 'item',
                formatter: function (val) {
                    console.log(val)
                    return val.marker+val.name+":"+val.percent+"%";
                }
           },
            series: [
                {
                    name: '分布情况',
                    type: 'pie',
                    radius: ['35%', '60%'],
                    center: ["50%","35%"],
                    avoidLabelOverlap: true,
                    label: {
                        show: false,
                        position: 'center',
                        fontSize: 14,
                        fontColor: '#cfcfcf'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: 16,
                            fontColor: '#333333',
                            formatter:function (a) {
                                if (a.name !== '') {
                                    let html = a.name + '\n' + '{a|' + a.percent + '%' + '}';
                                    return html
                                } else {
                                    return '{a|' + '0%' + '}'
                                }
                            },
                            rich: {
                                a: {
                                    color: '#333',
                                    fontSize: '18',
                                    lineHeight: 20,
                                    fontWeight: 700
                                }

                            },
                            textStyle: {
                                color: '#333333',
                                fontSize: '16',
                                lineHeight: 30,
                                fontWeight: "bold"
                            }
                        }
                    },
                    data: tsakKanban?.map((item) => {
                        if (item.name === '') {
                            return {
                                ...item,
                                itemStyle: {
                                    color: '#f7f7f7',
                                    emphasis: {
                                        color: '#f7f7f7',
                                    }
                                },
                                tooltip: {
                                    show: false
                                }
                            }
                        }
                        return item
                    })
                }
            ]
        };
    }

    render() {
        return (
            <div className={Styles.trainplanEchart}>
                <ReactEcharts option={this.optionPie()} style={{height:'350px'}}/>
            </div>
        )
    }

}
export default RegistrationStatus;