is it possible to change an individual node’s colour in an eChart treemap? I tried assigning a color property but the color does not change. I’ve gotten the label to change but i want the overall background color
I have tried by having a color property under series-treemap.data as the documentation says https://echarts.apache.org/en/option.html#series-treemap.data.color
Advertisement
Answer
As explained in the documentation, series-treemap.data.color is a list that affects the color of the nodes from the same level (and their children).
If you want to specifically set a node’s color, you’ll have to use series-treemap.data.itemStyle.color (doc).
Here is an example:
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>All the childrens of nodeA (ie. nodeAb, nodeAc, nodeAd) follow the rule set by color: ['blue','green', 'grey']. But nodeAa doesn’t follow this rule because itemStyle.color has its own value set to red.
Nodes nodeBa1 and nodeBa2 are both orange because it’s the only color in their parent’s color list. If you want one of them to have a different color, add more colors in the color list, or simply set itemStyle.color.