如何使用echarts在树形图中获取渐变

问题描述

我有一个层次结构，并且基于值，因此我希望基于地图上的值进行渐变。我为此使用了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,}
                        }
                    },levels: [
                        {
                            itemStyle: {
                                normal: {
                                    borderWidth: 2,borderColor: '#fff',gapWidth: 2
                                  }
                            }
                            
                        },],}]
            }}

            style={{ height: '300px',width: '50%' }}
        />
    )
}
export default TreemapEcharts

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

解决方法

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

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

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

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

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