如何根据项目值将 eCharts Treemap 元素格式化为特定的绿色或红色？

Question

我正在使用 eCharts 库在树图中显示数据。现在我想根据节点值显示树图节点颜色，在这个例子中是值[1]（注：另一个值[0]决定了我例子中的node/segment大小）。

我想设置特定的阈值，即值 >=5 应该是深绿色，而 >=0 但 <5 应该是普通绿色，等等。请看我的代码（不会导致预期的结果）以及下面的 JSFiddle link。

我试过设置颜色范围，例如使用 color: ['red', 'white', 'green'] 的红色到绿色颜色范围，它在 'normal' 值下工作正常，但在有 outliers/extremes 时效果不佳。示例：4 个节点，值 [-10、-3、4、10000]。前三个节点将显示为红色，但节点 (4) 实际上应显示为绿色，这是由于异常值 1000 扭曲了值范围。

option = {
  series: [{
    type: 'treemap',
    visualDimension: 1,
    colorMappingBy: 'value',
    levels: [{
      itemStyle: {
        color: function(params) {
          a = params.value[1];
          if (a >= 5) {
            return 'darkgreen';
          } else if (a >= 0 && a < 5) {
            return 'green';
          } else if (a <= -5) {
            return 'darkred';
          } else {
            return 'red';
          }
        },
        normal: {
          borderWidth: 5,
          borderColor: '#eee',
          gapWidth: 5
        }
      }
    }, {
      itemStyle: {
        normal: {
          borderWidth: 2,
          borderColor: '#fff',
          gapWidth: 2
        }
      }
    }],
    data: [{
      name: 'node1',
      value: [5, -10],
    }, {
      name: 'node2',
      value: [10, -4]
    }, {
      name: 'node3',
      value: [15, 3]
    }, {
      name: 'node4',
      value: [8, 1000]
    }]
  }]
};
myChart.setOption(option);

对于解决此问题的任何提示和建议，我深表感谢。谢谢！

JSFiddle link 此处：https://jsfiddle.net/frankmarks/szm1f20j/34/

Answer 1

我最终在 eCharts 库中找到了解决方案，它使用函数 convertData() 来对齐颜色值，因此它甚至可以处理离群值，并且可以很好地将正节点格式化为绿色，将负节点格式化为红色。

Link 这里：https://echarts.apache.org/examples/en/editor.html?c=treemap-visual

如何根据项目值将 eCharts Treemap 元素格式化为特定的绿色或红色？

How to format eCharts Treemap elements in specific green or red color depending on item values?

javascript

echarts