¿Es posible cambiar el color de un nodo individual en un diagrama de árbol de eChart? Intenté asignar una propiedad de color pero el color no cambia. He conseguido que cambie la etiqueta pero quiero el color de fondo general
He intentado tener una propiedad de color en series-treemap.data como dice la documentación https://echarts.apache.org/en/option.html#series-treemap.data.color
Como se explica en la documentación , series-treemap.data.color es una lista que afecta el color de los nodos del mismo nivel (y sus hijos).
Si desea establecer específicamente el color de un nodo, deberá usar series-treemap.data.itemStyle.color ( doc ).
Aquí hay un ejemplo:
var myChart = echarts.init(document.getElementById('main')); option = { series: [ { type: 'treemap', data: [ { name: 'nodeA', value: 10, color: ['blue','green', 'grey'], children: [ { name: 'nodeAa', value: 4, itemStyle : { color: 'red' }, }, { name: 'nodeAb', value: 6, children: [ { name: 'nodeAb1', value: 20 } ] }, { name: 'nodeAc', value: 6 }, { name: 'nodeAd', value: 6 } ] }, { name: 'nodeB', value: 20, color: ['orange'], children: [ { name: 'nodeBa', value: 20, children: [ { name: 'nodeBa1', value: 20 }, { name: 'nodeBa2', value: 20 } ] } ] } ] } ] }; myChart .setOption(option) <html> <body> <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.3.2/echarts.min.js"></script> <div id="main" style="width: 600px; height:400px;"></div> </body> </html> Todos los hijos de nodeA (es decir, nodeAb , nodeAc , nodeAd ) siguen la regla establecida por color: ['blue','green', 'grey'] . Pero nodeAa no sigue esta regla porque itemStyle.color tiene su propio valor establecido en red .
Los nodos nodeBa1 y nodeBa2 son naranjas porque es el único color en la lista de colores de sus padres. Si desea que uno de ellos tenga un color diferente, agregue más colores en la lista de color o simplemente configure itemStyle.color .