antdesign charts 矩形树状图太多无法展示文字修改

40 阅读1分钟


//配置的config

    const config = {
        data:{
            name: 'root',
            children: chartdata,
        },
        colorField: 'group_name',
        legend: {
            visible: false, // 设置图例不可见
        },
        tooltip: {
            visible: true, // 设置工具提示可见
            formatter: tooltipFormatter
        },
        label: {
            // 可手动配置 label 数据标签位置
            position: 'left-top',
            // 配置样式
            style: {
                fill: '#000000',
                opacity: 0.8,
                fontSize: 14,
            },
            formatter: (data: any) => {
                return `名称:${data.group_name}\n名称2:${data.customer_name}\n金额1:${data.be_overdue_amount}\n天数1:${data.be_overdue_day}`;
            }, // 配置展示内容 --不需要就删除
        },
    };

注意:

        tooltip: {
            visible: true, // 设置工具提示可见
            formatter: tooltipFormatter
        },
        
        这个 tooltipFormatter 的提示 。他只接收name 和 value
        单独写。 可以看到他的内容在path中
        

image.png

**所以渲染 tooltipFormatter **


 const tooltipFormatter = (data:any) => {
        console.log(data)
        const newdata= data.path[0].data
        return {
          name: "提示",
        value: `<div style="padding: 8px;">
        <div style="padding: 8px;">集团名称:${newdata.group_name}</div>
        <div style="padding: 8px;">客户名称:${newdata.customer_name}</div>
        <div style="padding: 8px;">逾期金额:${newdata.be_overdue_amount}</div>
        <div style="padding: 8px;">逾期天数:${newdata.be_overdue_day}</div>
      </div>`
        };
      };
      如果不需要配置也可以直接是
      
       const tooltipFormatter = (data:any) => {
        console.log(data)
        const newdata= data.path[0].data

        return {
          name: "提示",
          value: `
                  集团名称:${newdata.group_name}<br />
                  客户名称:${newdata.customer_name}<br />
                  逾期金额:${newdata.be_overdue_amount}<br />
                  逾期天数:${newdata.be_overdue_day}<br />
                  `
        };
      };