react-ant-design-charts 柱状图x轴内容换行，tooltip 内容格式化

export default {
    Histogram: function () {
       let data = [
        {
            type: '城市1',
            sales: '20',
            datsdetail: [‘城市1-1’,‘城市1-1’]
        },
        {
            type: '地市2',
            sales: 18,
            datsdetail: ['城市2-1','城市2-2']
        }
    ]
        const config = {
            data,
            xField: 'type', //x轴字段
            yField: 'sales', // y轴字段
            color:'#5470c6', // 柱子颜色
            maxColumnWidth: 40, // 柱子宽度
            minColumnWidth: 40,
            tooltip: {
                trigger: 'axis',
                // triggerOn:'click',
                axisPointer: {
                    type: 'shadow',
                },
                fields: ['type', 'sales', 'datsdetail'],
                customContent: (title, params) => { // 鼠标移入提示内容
                    if (params[0]) {
                        const { data } = params[0]
                        var result = '';
                        if (data?.datsdetail) {
                            result += `<div style="padding:8px 8px 0 8px">${data.type}&nbsp;&nbsp;&nbsp;<span style="float:right">任务项${data.sales}</span><hr /></div>`
                            data.datsdetail.forEach(function (item, index) {
                                result += `<p style="margin:0;padding:8px;">${index}、${item}</p>`
                            });
                        }
                        return result;
                    }

                }
            },
            xAxis: {
                label: {
                    autoHide: true,
                    autoRotate: true,
                    formatter: function (params) { // x轴的内容太长换行
                        var newParamsName = "";// 最终拼接成的字符串
                        var paramsNameNumber = params.length;// 实际标签的个数
                        var provideNumber = 4;// 每行能显示的字的个数
                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);// 换行的话，需要显示几行，向上取整
                        /**
                         * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                         */
                        // 条件等同于rowNumber>1
                        if (paramsNameNumber > provideNumber) {
                            /** 循环每一行,p表示行 */
                            for (var p = 0; p < rowNumber; p++) {
                                var tempStr = "";// 表示每一次截取的字符串
                                var start = p * provideNumber;// 开始截取的位置
                                var end = start + provideNumber;// 结束截取的位置
                                // 此处特殊处理最后一行的索引值
                                if (p == rowNumber - 1) {
                                    // 最后一次不换行
                                    tempStr = params.substring(start, paramsNameNumber);
                                } else {
                                    // 每一次拼接字符串并换行
                                    tempStr = params.substring(start, end) + "\n";
                                }
                                newParamsName += tempStr;// 最终拼成的字符串
                            }

                        } else {
                            // 将旧标签的值赋给新标签
                            newParamsName = params;
                        }
                        //将最终的字符串返回
                        return newParamsName
                    }
                },
            },
        };
        return <Column {...config} />;
    }
}