Forward the previous email to Miles. And we would like to know that do you mean you need each item to take the colors in the order of their order in `data` or (like the current policy) in their order of values? Our current policy makes sure that the bigger parts of the series always take more primary colors and we think colors at the front of "option.color" are more primary. Does this policy seem to work for you?
Thanks *Ovilia* On Fri, Oct 8, 2021 at 3:18 PM SHUANG SU <sushuang0...@gmail.com> wrote: > 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 > > >
