Thank you! The sample html code worked. I had been exclusively
experimenting in the examples editor before going to real html/js.
I think the current default policy likely works nicely as the default.For
the use case I am working on, I am showing treemaps over time (in a
presentation). For example, imagine your disk usage example on day 1 of
your computer, then day 100, then day 1000. The categories would be
consistent over time, but the values would change. In this case, the
audience would have a much easier time tracking the changes if the color
assigned to the category remains the same. ("On day 1, your photos, in red,
are only 1% of the disk ... but on day 100, you can see the red has now
taken over the orange fonts...")
I still don't understand why the examples site doesn't work, but, clearly
the issue is limited to it, not the underlying feature.
Thanks for your help!
miles
On Fri, Oct 8, 2021 at 1:40 AM Ovilia <oviliazh...@gmail.com> wrote:
> 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
>> >
>>
>
