如何使用echarts获取树状图中的梯度

Question

我有一个单一的层次结构，并且基于值，我想要基于我地图上的值的渐变。为此，我使用了echarts。他们的例子中给出的解决方案很难实现以获得梯度。我已经使用React JS实现了这一点。下面是我的代码和json --

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

请让我知道我们如何添加一个渐变的颜色变化从最深的阴影到最亮的一种颜色在这里。

Answer 1

如果有人还想知道，你应该看看他们关于level：https://echarts.apache.org/en/option.html#series-treemap.levels的文档。

基本上，您需要配置一个颜色范围，并将colorMappingBy设置为"value“。你的level配置应该是这样的：

{
    color: ["#942e38", "#aaa", "#269f3c"],
    colorMappingBy: "value",
    itemStyle: { ... }
}

要微调可视化效果，可以将值转换为数组，数组中的第二个元素是缩放到所需饱和度的值，并通过将visualDimension设置为1 (数组元素的索引值)将颜色映射到该值，然后手动设置visualMin和visualMax值。

你也可以看看他们的例子：https://echarts.apache.org/examples/zh/editor.html?c=treemap-visual。