antdesgin 矩形树图 ，渲染和提示以及颜色设置等

import { Treemap } from '@ant-design/plots';

   <div className="desktop_overdue_chart" style={{ height: `${tableheight}` }}>
                                                <Treemap {...config} style={{ height: `${tableheightchart}` }} />
                                            </div> </Spin>

// 说明：  customContent  设置移入矩形树图的提醒。
 const datachart = {
        name: 'root',
        children: chartdata, //接口返回数据
    }
  const config = {
        data: datachart,
        colorField: 'group_name',
        color: ['#E65100', '#EF6C00', '#F57C00', '#FB8C00', '#FF9800', '#FFA726', '#FFB74D', '#FFCC80', '#FFE0B2', '#FFF3E0',], // color设置多颜色
        legend: {
            visible: false, // 设置图例不可见
        },

        tooltip: {
            showMarkers: false,
            enterable: true,
            domStyles: {
                'g2-tooltip': {
                    width: '220px',
                },
            },
            customContent: (title, items) => {
                const newdata = items[0]?.data || {};
                const  divcontent =   `<div style="padding: 10px 10px;color:black;display:flex;justifyContent:start">
                <div>
                <div style="margin: 28px 0px;margin-right:10px;width:30px;height:30px;line-height:30px;background-color:red;" className="chartClass">=></div>
                </div>
                <div>
              <div style="padding: 4px 0px;"><span style="display:inline-block;width:10px;height:10px;line-height:10px;border-radius:50%;background-color:#E65100;margin-right:5px"></span>名称1：${newdata.group_name}</div>
              <div style="padding: 4px 0px;">名称2：${newdata.customer_name}</div>
              <div style="padding:  4px 0px;">金额：${newdata.be_overdue_amount}</div>
              <div style="padding:  4px 0px;">天数：${newdata.be_overdue_day}</div></div>
             </div>`
             console.log('===',divcontent)
                return  divcontent;
            },
        },
        label: {
            // 可手动配置 label 数据标签位置
            position: 'left',
            // 配置样式
            style: {
                fill: '#ffffff',
                opacity: 1,
                fontSize: 14,
                textAlign: 'left',
            },
            formatter: (data: any) => {
                return `名称1：${data.group_name}\n名称2：${data.customer_name}\n金额：${data.be_overdue_amount}\n天数:${data.be_overdue_day}`;
            }, // 配置展示内容 --不需要就删除
        },
    };