[Bug] Treemap series.data children label styles dont work wen label has formatter

[Eloyts97]

Version

5.4.2

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=PYBwLglsB2AEC8sDeAoW7YCIzGAG0hEwC5kBfAGjQ0zwFMBzO6AExOWoxoGcALYAO7swAJwCudTrEpTM3OiIh1u7ANpSuqLtprQAhgFs67TAFFuYPS2CwWdPLBB0WEa5io6d2AJ5OToujoDPSIPTy5aPQAje3YtcM85fiFSUQkwhO1MADNgEWCwMAV2AAoQPRFDbgBKBAA-DkzMkTowMRE4AHIkFyNobihoAB9O2ABqRwqqgDoWPUtp_SNx2E6yToBuDSaZJqzFAGNeOO299Exe5gGYE7OmnJgwAGUIAC9jUgBGAGYMu8SDvg8iYAMQABghkPcp3-51y0GeYG89BM0DywTw0Nh4QeCIA6nQIAxeGBUei9Ji_tiaPCwAAxQwQPDeEymAAewEwML2u2pWCiLT0AGsAEIs0jxPk0x4vd7sT4AFipfMwgLwwNImBBUQA7J8DvqsVLpQinkiUZq0fkKUbjVhaQSiSSTFF8GxldTcfTGczWRyuVLeZ6jKIIAcVBLuf8vbKPrAAExgj3Y1VAkSgugANgArJ8IbbjTHzXHMFaMQWpV7HcTSZrXXh3VG7l6GQYmeKsOzOU2EkGU7x05G7ecBK4wMdNXmwQBSCsq3iEmvsJM9va0CDQOgACUXztI8dXnjIh_Qx55yYiYhAThEABlorEh9G-IJhOI6BfEocJ40VZd-oMtzDjGbxxj8n7NmqGpYOCkL5hBZxFsiJZljaCFrg6u61lgqGUieCQtj6HZmP6-FcGe_wUZkfY4jgRBfAhtB0Nk2GfIxihLgxPaYK6hTAAYy6MdweTYdkFLyIxaJ2AAwngYZCuwYl4BJ3ECnQVgHOIBhREBzYviksBKfIPY0YkeAPng97eMAYjYZKiG8K4dAAPIAG4KOZ9GwGkkjntxIjAIYb7pNxcyWGo-H2bCmCuRSEjsJmCrZvG0wABxwRlYJsWRuiGCWACCtl5G8VjANMsCmA47msM4eSwOqsAHCEbSVCIACHc7NuU44mIVOCKK8pXlZVsDVXY1giPVNhNeA7QVB16EAmmEXDjBiVRNm2SZu4_LmQcCk5egAC6i1eEcTIsC00ArcOUXAbFeDxaQ3zxvGmbTAqmVwdlq0REsBUiKSp2Id1P6YH1xWDdYw1Vcw411Q1M0tfNAD0-WA51hbmTEmJPr9WS0q27Z-pywPRbSsbsImZPRkUbJgPlckMNdmr0CxmOrVWWEum6HPAXTYAACJ0IClSQDclowMYNPNhTxZktaeH42dy2agIjlFAGytUcapnUnddoxXFYGZj80yJl9kK_IdBH_SYW78dLNs4qDvVFQNQ0VbDNUTVNjXNXN7Uow7Rh8562OPr-ysmt6ba-pqXZh4WFOgVTK7RxEAuM0SLNYGzQPO_cmFOthPG8zLiEC8LovzIBkubknlZy8hCvlhXa5QYOWDqxAmuFzoOuBu3GAG4WD1PbAnym985uW1bw9eHbmoAJLQGGUCN9GruahDHvQ17o1w7Vk2IwHrVtSjq_r92q2D_8R34XrCSj2u49xtmACcL3TDqH9___ACdQV1LHlEw0k9DQAOPYUqm8Vbqi7uoTmII6DZh1N8NBWtqQnRtpgbeWBwGQOgW4YB50GxXRunaF-Ko37yg_jqHU0xP4AOYR_BeWQl74PVOOZQsCQbzDBgQqB5lrAo1ksAbhKh-7SDYVQz0NDSAf1SqlH-LDmFAKkX9UBmoQ5O2jrg_hYCIFCNKsHR2mDdYyI0TQeRsBFHKN_qo_-6i9EcMwFfA4G82ERDwZgQRRDgCXzXh4m-w4n6wlkSmGxdiVGOL_s45WIDQ6agALLMF4R3VWsBEEZ3OCCBU8Z8n5PMatbBeifF-OEQE1J10pFhP-BE6KUSlExNifE_GiSSx4kdtdLxNBylGP8SjLpfRil8jvncB-sI6k6AaYkGxnxszZkStMD-TDVHZmAa40wcBlA3j0LYOgkwGA2BAHVI4dAACO8VgE-O2bAXZCh9l2COScs5C4rm6JVJ3ChhYQTZGyCwbMCpsijImSQxyZC0mkGyZQqx5wbGJU-ObVKvTziuPygcKBwlFDABUKirAtydncD2Qcl5jg3mXIkGjTFyhiq4tBdiaZZxZnNgRQqJF8YUVwpwlorAGKsXYqUHi7l-ieoJyJSS555Rjnksmucj51KBXFR4bUyxeibHfA_mCbMP81mqPxR0sBXCFzCrKQY8V9ziWPNJdK15cr3lUrERIhlUy1UJJsfGT-CppgLNiawkVridHpPuISy1krDm2tlY1B1dBTGh1VVIlliENXsvNg4xxqVMwGsDY7WA_LlCCp4Qa0NDzKg2r0DK059rKWxp0Xmml3BC2SNvm69pHqvU-r1Sw7NvK3FBM8SKktVqy1SorXa6NNbAnXxdZRVtv0jaPTAgqVKKUClz21T2pJWBqnBsyKmeBPy9F5IKSemdWDi3ms7BK61o7K0UoVTuhNq0k2v2NuwD-qbOXrvjJuksZpa5SxECyC9Yqr1hpvRGsdUb5VUv_eLTcQGz1nCZXsF99wPX5JnrmP1GyA29uGWkkDYM7mlqeZBu91aFUEZqbfG2kzZ2RRwfMzln0VmZjnlmnBWzr0jvI-O0QEDuDZAUMwDx-yohGIqBAPQu6CWXrMDxsjZKq3eUqP0YTV0xOwAk5AqTMmSGZJhb8rVegFR6GMHR8FF1yHQsTSKqJ8YGGfD9X_X9vUG10tNQkod4blN1QE-pkTkDpPack4oPQiraU4ubaEudnMHNOZc_6lxvb82NuVV59pPmIN-cmgFoTQWtM6aauFyL6XFAqpbXZ9Vb79z5J1R_C2X0foJNcU6k1smXbyZI8OpTkaVP5Y06JkLxW9OiONZV2L1X3W1YTIqMEPr2Nzy5SlrdmAg1EdZIp8tFHVOCaG8F8TYXpNxos1V599nZufFSkCj666N14bW3WtLTbOuJGy7x3Le3AuaZG8diLz2G2vafbdS7i6qbzcW-ulbrXe3uIHWa0DCnwOff6_5tTBXftHd06V-HIS7QoaaGhvd8ybves-uu3Dq2Sw7oNd82zOTcmFNPdy0p3nuvbdvfxjHB2iv_ZRo-87oOavg9IKgpFyVv1uc1NRt7XgPt9agwNnnhW_s45O7L2pdHH7A2J1gD13xNXevjJqxxSouO9u2a5aTxCcGEutzAgzB6GfAWQag9B3wkPhDZ56Uhl0oVZOm22q7Sz3qJXXdban7msWebl1ke3NuAlpdjyD2FIuJ4LMzGHinltI-w7Wy9jLcfvEc4dyIwvFWYsE7i_dWbjnFFpXTaotp870UY02-KsvSeMap-NHrnEHrf7KNSk3lhLfOZtYm5l-dCeTHtcm9XoP86bEKm-DmRhznYnS6wBtwdpfE-na9zsGvhsNU_BnvX2Jef2k5uWBXoVxe-n75MYDpVlej_URP2PWbq_1_Ya349iWHjo_ucLPiIsAb3lKP3nMnXkPo3n6uPsBK4rTiKvToHozjBMzkUqzh3lel3gLmklrlKPRncITugHrguhPHqDqk1pbD-hbmtqYCIAFJNMwC8rJqKsRswXVGwbahwWgUZpWCCHoNdiPiCpZjgn7jZugcLjNqLpPM5rPPdvQVHjvB5tFiAXJkjkwSwfcnALamVinkLmnnIRnoobQXQdvuDEDkXrgWYNwawfoWOmVsDsYX3mDmYR_EoVLoAfbGYnYToTwU4ccofpAXyNAV4PMuYfdmCCofnkAf2qTHvtoQ4XoS8lOsEh_r2F_pWAbsojnhxlYXBoMAoMBskVwbobwc4cUYBiyEQXyCQchrrkxrNuHhyulJYQwSWAAApQZ6BQLgCO527ya9Eyr9F0CDG26VgCFSJaj_KpR6A5hZFcA-4phSEB6CHhEeFxjLpIqfAWGZScaqF8rqFQDT6cw-KjE2DjGTFJ6nH0phH6zbHsC7E-oHEZRHHxHR4Fq2HlEmBXGwA3GWDl42Hv6PHYgRFZDzJZQS7vHzy-Gajz7nHASXF9EDHAkBJInLFHg5HUJ16fRWGmCujABCjImGyoljHokmJEm4CknYkDy4lyJXZ5jvRKJWG76I5gwAlAkv5mLgnhLPEKKZirrm7HHra5r35Fp_GajclUkiKv4_FgluFQGCkKFgiskw435w6JGaGcH_FokTEYkZEbz8n1Kql5ifCwkR5WEoF6IzEYFahYHxj0kJCrEXEjEGm3EEE0ahLa6uqMa5FXar5ggMJwkQiakpiuIABKgQ2k-A3AQxlYPiMZQQ9YCZUxXyhmsxIIqyOo2YBwbAEh0xEK_uucmxTx6eS6Oo-R92EZE-qW9xZJhYyZsZaZJiyeGhppdwkJEQ8yCo1Zd20OVhkpTZSZ8mKZcZyk7ZoJD-XZzKqpjm12g5c8VOXxO87e0pWAE5bZ5ePeypWxlZVMqU6C0wS2ls4ECJO-_hm5mA258ZvJ8a-5FZphcYi5NZlO7JEpM5UpnJJgd5U58pX5b-s5T5EJC5x5DCZ5zW1-re2p06dh_56ZASEBoFAph5-43w7566nxWpa2NRCGZRv5moiFJi-FpRLp5EfplEPYbpZkdA7kykh6ROOCV4N494OMukhYC4JcacbC-iLALg0ADATFdoopys6c4l-KmYUitFnoLgFgAygksxEm-0DAAUYgrA0kmSmAPcmsfFroIgdgIgeIY4P4LWhsBlRlWlzuMEdAYIdldlLpZBWQvcQQZoLceMhYllCgJlLAoG5lXleQVl2lyC9lYVTlOuAZKorFCg7FkckJmA3FnEk8yWKJVgglwlLu-MYl-MEluVUlMlfF8llghCSlnMKlQoalNkml2lulnyFlQVPlpl8o-ljVIg1l0EWoDl4VNszlEQrlBg7lFoUcgVhlTVflZlrVY17VIV3VjlvVkVaFKoA1Q1cYCV3lxlzVXE5VbVHVXcXVYV81gYj8NFMIOsD8ZAQAA

Steps to Reproduce

The option is: {
"tooltip": {},
"legend": {
"show": true
},
"series": [
{
"name": "Estado del pedido",
"type": "treemap",
"label": {
"show": true,
"formatter": (params) => {
return '{dimension|' + params.data.name + '}';
},
"rich": {
"dimension": {
"fontSize": 13,
"color": "#000000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "Exo"
},
"breakBy": {
"fontSize": 14,
"color": "#b71c1c",
"fontStyle": "normal",
"fontWeight": "bold",
"fontFamily": "Exo"
},
"metrics": {
"fontSize": 20,
"color": "#e65100",
"fontStyle": "normal",
"fontWeight": "bold",
"fontFamily": "Exo"
},
"hr": {
"width": "100%",
"height": 0,
"lineHeight": 2
}
}
},
"upperLabel": {
"show": true,
"rich": {
"dimension": {
"fontSize": 13,
"color": "#000000",
"fontStyle": "normal",
"fontWeight": "normal",
"fontFamily": "Exo"
}
}
},
"top": 1,
"left": 1,
"right": 1,
"bottom": 0,
"sort": false,
"nodeClick": false,
"breadcrumb": {
"show": false
},
"labelLayout": {
"hideOverlap": true
},
"roam": true,
"data": [
{
"value": 6452.800000000001,
"name": "Autorizado. El vendedor lo capturará",
"path": "Autorizado. El vendedor lo capturará",
"color": [
"#64b5f6", "black"
],
"children": [
{
"value": 3226.400000000001,
"name": "Art",
"path": "Autorizado. El vendedor lo capturará/Art",
"label": {
"fontFamily": "Exo",
"fontSize": 20,
"textAlign": "left",
"fontWeight": "bold",
"textDecoration": "none",
"fontStyle": "normal",
"color": "white"
}
},
{
"value": 1613.2000000000003,
"name": "Home",
"path": "Autorizado. El vendedor lo capturará/Home",
"label": {
"fontFamily": "Exo",
"fontSize": 20,
"textAlign": "left",
"fontWeight": "bold",
"textDecoration": "none",
"fontStyle": "normal",
"color": "white"
}
},
{
"value": 1613.2000000000003,
"name": "Inicio",
"path": "Autorizado. El vendedor lo capturará/Inicio"
}
]
},
{
"value": 5932.799999999997,
"name": "Cancelado",
"color": [
"#e57373"
],
"path": "Cancelado",
"children": [
{
"value": 1977.599999999999,
"name": "Clothes",
"path": "Cancelado/Clothes"
},
{
"value": 988.7999999999997,
"name": "Home",
"path": "Cancelado/Home"
},
{
"value": 988.7999999999997,
"name": "Inicio",
"path": "Cancelado/Inicio"
},
{
"value": 988.7999999999997,
"name": "Men",
"color": [
"#424242"
],
"path": "Cancelado/Men"
},
{
"value": 988.7999999999997,
"name": "Women",
"path": "Cancelado/Women"
}
]
},
{
"value": 15564.959999999995,
"name": "En espera de pago por cheque",
"path": "En espera de pago por cheque",
"color": [
"#ffd54f"
],
"children": [
{
"value": 641.28,
"name": "Accesorios",
"path": "En espera de pago por cheque/Accesorios"
},
{
"value": 641.28,
"name": "Accessories",
"path": "En espera de pago por cheque/Accessories"
},
{
"value": 3905.759999999999,
"name": "Clothes",
"path": "En espera de pago por cheque/Clothes"
},
{
"value": 2594.159999999999,
"name": "Home",
"path": "En espera de pago por cheque/Home"
},
{
"value": 341.27999999999986,
"name": "Home Accessories",
"path": "En espera de pago por cheque/Home Accessories"
},
{
"value": 2594.159999999999,
"name": "Inicio",
"path": "En espera de pago por cheque/Inicio"
},
{
"value": 1482.2400000000005,
"name": "Men",
"color": [
"#424242"
],
"path": "En espera de pago por cheque/Men"
},
{
"value": 941.2800000000002,
"name": "Stationery",
"path": "En espera de pago por cheque/Stationery"
},
{
"value": 2423.5199999999995,
"name": "Women",
"path": "En espera de pago por cheque/Women"
}
]
},
{
"value": 12840.960000000006,
"name": "En espera de pago por transferencia bancaria",
"path": "En espera de pago por transferencia bancaria",
"color": [
"#90a4ae"
],
"children": [
{
"value": 927.1999999999999,
"name": "Accesorios",
"path": "En espera de pago por transferencia bancaria/Accesorios"
},
{
"value": 927.1999999999999,
"name": "Accessories",
"path": "En espera de pago por transferencia bancaria/Accessories"
},
{
"value": 2425.920000000001,
"name": "Clothes",
"path": "En espera de pago por transferencia bancaria/Clothes"
},
{
"value": 2140.1600000000008,
"name": "Home",
"path": "En espera de pago por transferencia bancaria/Home"
},
{
"value": 1854.4000000000005,
"name": "Home Accessories",
"path": "En espera de pago por transferencia bancaria/Home Accessories"
},
{
"value": 2140.1600000000008,
"name": "Inicio",
"path": "En espera de pago por transferencia bancaria/Inicio"
},
{
"value": 1854.4000000000005,
"name": "Men",
"color": [
"#424242"
],
"path": "En espera de pago por transferencia bancaria/Men"
},
{
"value": 571.5200000000002,
"name": "Women",
"path": "En espera de pago por transferencia bancaria/Women"
}
]
},
{
"value": 23394.239999999994,
"name": "Enviado",
"path": "Enviado",
"color": [
"#e57373"
],
"children": [
{
"value": 1566.6400000000003,
"name": "Accesorios",
"path": "Enviado/Accesorios"
},
{
"value": 1566.6400000000003,
"name": "Accessories",
"path": "Enviado/Accessories"
},
{
"value": 2798.8799999999997,
"name": "Art",
"path": "Enviado/Art"
},
{
"value": 2798.8799999999997,
"name": "Clothes",
"path": "Enviado/Clothes"
},
{
"value": 4365.519999999999,
"name": "Home",
"path": "Enviado/Home"
},
{
"value": 3133.2799999999993,
"name": "Home Accessories",
"path": "Enviado/Home Accessories"
},
{
"value": 4365.519999999999,
"name": "Inicio",
"path": "Enviado/Inicio"
},
{
"value": 2798.8799999999997,
"name": "Men",
"color": [
"#424242"
],
"path": "Enviado/Men"
}
]
},
{
"value": 715.2000000000002,
"name": "Error en pago",
"path": "Error en pago",
"color": [
"#a1887f"
],
"children": [
{
"value": 119.20000000000002,
"name": "Accesorios",
"path": "Error en pago/Accesorios"
},
{
"value": 119.20000000000002,
"name": "Accessories",
"path": "Error en pago/Accessories"
},
{
"value": 119.20000000000002,
"name": "Home",
"path": "Error en pago/Home"
},
{
"value": 119.20000000000002,
"name": "Inicio",
"path": "Error en pago/Inicio"
},
{
"value": 238.40000000000006,
"name": "Stationery",
"path": "Error en pago/Stationery"
}
]
},
{
"value": 6401.280000000002,
"name": "Pago aceptado",
"path": "Pago aceptado",
"color": [
"#ff8a65"
],
"children": [
{
"value": 481.12000000000006,
"name": "Accesorios",
"path": "Pago aceptado/Accesorios"
},
{
"value": 481.12000000000006,
"name": "Accessories",
"path": "Pago aceptado/Accessories"
},
{
"value": 1011.5200000000003,
"name": "Clothes",
"path": "Pago aceptado/Clothes"
},
{
"value": 240,
"name": "Ebooks",
"path": "Pago aceptado/Ebooks"
},
{
"value": 1106.88,
"name": "Home",
"path": "Pago aceptado/Home"
},
{
"value": 962.24,
"name": "Home Accessories",
"path": "Pago aceptado/Home Accessories"
},
{
"value": 1106.88,
"name": "Inicio",
"path": "Pago aceptado/Inicio"
},
{
"value": 1011.5200000000003,
"name": "Men",
"color": [
"#424242"
],
"path": "Pago aceptado/Men"
}
]
},
{
"value": 14307.200000000008,
"name": "Reembolsado",
"path": "Reembolsado",
"color": [
"#9575cd"
],
"children": [
{
"value": 1478.4000000000008,
"name": "Accesorios",
"path": "Reembolsado/Accesorios"
},
{
"value": 1478.4000000000008,
"name": "Accessories",
"path": "Reembolsado/Accessories"
},
{
"value": 2718.4000000000005,
"name": "Art",
"path": "Reembolsado/Art"
},
{
"value": 2837.6000000000013,
"name": "Home",
"path": "Reembolsado/Home"
},
{
"value": 2718.4000000000005,
"name": "Home Accessories",
"path": "Reembolsado/Home Accessories"
},
{
"value": 2837.6000000000013,
"name": "Inicio",
"path": "Reembolsado/Inicio"
},
{
"value": 238.40000000000006,
"name": "Stationery",
"path": "Reembolsado/Stationery"
}
]
}
],
"levels": [
{
"upperLabel": {
"height": 20,
"padding": [
4,
0,
0,
6
],
"distance": 0,
"backgroundColor": "white",
"borderWidth": 1,
"borderColor": "#e0e0e0"
},
"itemStyle": {
"borderWidth": 1,
"borderColor": "#e0e0e0"
}
},
{
"upperLabel": {
"height": 19,
"padding": [
4,
0,
0,
6
],
"distance": 0,
"backgroundColor": "white",
"borderWidth": 1,
"borderColor": "#e0e0e0"
},
"itemStyle": {
"borderWidth": 1,
"borderColor": "#e0e0e0"
}
},
{
"itemStyle": {
"borderWidth": 1,
"borderColor": "#e0e0e0"
}
}
]
}
]
}

Current Behavior

Label of first section "Art" is shown color black

Expected Behavior

Must show white as its spicified on data:
"data": [
{
"value": 6452.800000000001,
"name": "Autorizado. El vendedor lo capturará",
"path": "Autorizado. El vendedor lo capturará",
"color": [
"#64b5f6", "black"
],
"children": [
{
"value": 3226.400000000001,
"name": "Art",
"path": "Autorizado. El vendedor lo capturará/Art",
"label": {
"fontFamily": "Exo",
"fontSize": 20,
"textAlign": "left",
"fontWeight": "bold",
"textDecoration": "none",
"fontStyle": "normal",
"color": "white"
}
},

Environment

- OS:Ubuntu
- Browser:Google Chrome 110.0.5481.100
- Framework:vite 4.1.0

Any additional comments?

No response

[helgasoft]

You have data.color as an array with 2nd sub-node set as black data.color: ["#64b5f6", "black"]. "Home" is the 2nd node and is black, so no surprise.
If you set data.color: "#64b5f6", all sub-nodes will have the same color.

[Eloyts97]

I'm sorry if I haven't explained myself well, but what I need is for the label of the second element that has a black background to be white, for example, and not like the others that are configured in levels formatter and rich

[helgasoft]

Me sorry, did not read the title carefully.
Issue is with series-treemap.label vs series-treemap.data.label.
Second has priority, but the 'dimension' rich format is not defined for it. This is the reason why label "Home" is black. Once "dimension" format is defined for node "Home"(or "Art") , the treemap.label formatter picks it up and it works.
Demo Code