How to get gradient in treemap using echarts - gradient

Question

I have a single hierarchy and based on values, I want gradient based on values on my map. I have used echarts for this. The solution given in their examples is hard to implement for getting a gradient. I have used React JS to achieve this. Here's my code along with json here -
import React, {useEffect} from 'react';
// import the core library.
import ReactEchartsCore from 'echarts-for-react/lib/core';
import ReactEcharts from "echarts-for-react";
// then import echarts modules those you have used manually.
import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/treemap';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
var treemapData = [
{
"name": "abcdaaaaaaaaaaaaaaaaa",
"value": 250,
},
{
"name": "xyzxyzxyzxyzxyzzz",
"value": 525,
},
{
"name": "mnopmnopmnop",
"value": 1120,
},
{
"name": "vsuuuuuuuuuvu",
"value": 216,
},
{
"name": "1232342343434",
"value": 400,
},
{
"name": "timetimetime",
"value": 297,
},
{
"name": "placeplaceplace",
"value": 208,
},
{
"name": "countrycountry",
"value": 1203,
}
];
function TreemapEcharts() {
return (
<ReactEcharts
option={{
series: [{
type: 'treemap',
data: treemapData,
label: {
normal: {
textStyle: {
ellipsis: true
},
position: 'insideCenter',
formatter: function (params) {
var arr = [
'{name|' + params.name + '}',
'{value|' + params.value + '}'
];
return arr.join('\n');
},
rich: {
name: {
fontSize: 14,
color: '#fff'
},
value: {
fontSize: 14,
color: '#fff'
},
}
}
},
levels: [
{
itemStyle: {
normal: {
borderWidth: 2,
borderColor: '#fff',
gapWidth: 2
}
}
},
],
}]
}}
style={{ height: '300px', width: '50%' }}
/>
)
}
export default TreemapEcharts
Please let me know how can we add a gradient where color varies from darkest shade to lightest shade of one color here.

Answer 1

In case anyone is still wondering, you should take a look at their document regarding level: https://echarts.apache.org/en/option.html#series-treemap.levels.
Basically, you need to configure a color range and set colorMappingBy to "value". You should have something like this for your level config:
{
color: ["#942e38", "#aaa", "#269f3c"],
colorMappingBy: "value",
itemStyle: { ... }
}
To fine-tune your visualization, you can convert your value to an array, with the second element in the array being a value scaled to the desired saturation and map your color to that value by setting visualDimension to 1 (index value of the element the array), and manually set visualMin and visualMax values.
You can also take a look at their example: https://echarts.apache.org/examples/zh/editor.html?c=treemap-visual.