If update a's value to 100 and call chart.setOption(option) again, color of
a will not be changed.
See the demo below
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"
/>
<script src="
https://cdn.jsdelivr.net/npm/echarts@5.2.1/dist/echarts.min.js";></script>
</head>
<body>
<style>
body, html {
padding: 0;
margin: 0;
}
</style>
<button onclick="modifyATo(100)">Modify a's value to 100</button>
<div id="main0" style="height: 400px;"></div>
<script>
function modifyATo(newValue) {
option.series[0].data[0].value = 100;
chart.setOption(option);
}
var option = {
series: [
{
type: 'treemap',
colorMappingBy: 'id',
data: [
{
id: 'a',
name: 'a',
value: 10
},
{
id: 'b',
name: 'b',
value: 8
},
{
id: 'c',
name: 'c',
value: 3
},
{
id: 'd',
name: 'd',
value: 20
}
]
}
]
};
var dom = document.getElementById('main0');
var chart = echarts.init(dom);
chart.setOption(option);
</script>
</body>
</html>
```
Thanks,
------------------------------
Su Shuang (100pah)
------------------------------
On Mon, 4 Oct 2021 at 23:54, Miles Libbey <mlib...@apache.org> wrote:
> Hi folks -
> I'm trying to use treemaps' colorMappingBy: id to keep the color consistent
> for an item when its values change. For instance, if I use
> option = {
> series: [
> {
> type: 'treemap',
> colorMappingBy: 'id',
> data: [
> {
> id: 'a',
> name: 'a',
> value: 10
> },
> {
> id: 'b',
> name: 'b',
> value: 8
> },
> {
> id: 'c',
> name: 'c',
> value: 3
> },
> {
> id: 'd',
> name: 'd',
> value: 20
> }
> ]
> }
> ]
> };
> in https://echarts.apache.org/examples/en/editor.html?c=treemap-simple
> "a" gets a (default) color of green. But, if you change a's value to 100,
> it changes to blue (and all the other items also change). I found that I
> can hardcode the items color like:
> {
> "name": "a",
> "value": 10,
> "itemStyle": {
> "color": "#3ba272"
> }
> }
> but that's not theme friendly. I can't help but think I'm doing it wrong,
> but can't find the right magic. Any pointers?
> thanks!
> miles
>
