如何根据项目值以特定的绿色或红色格式设置eCharts树图元素？

Question

我正在使用eCharts库在树形图中显示数据。现在，我想根据节点值显示树形图的节点颜色，在此示例中为value [1]（注：在我的示例中，另一个value [0]确定节点/段的大小）。

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

我尝试设置颜色范围，例如使用color: ['red', 'white', 'green']的红色到绿色范围，可以正常使用“正常”值，但是当存在异常值/极端值时，效果不佳。示例：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链接在这里：https://jsfiddle.net/frankmarks/szm1f20j/34/

Answer 1

我最终在eCharts画廊中找到了解决方案，该解决方案使用功能convertData（）来对齐颜色值，因此即使在离群值下也可以使用，并且很好地格式化了带有绿色的正节点和带有红色的负节点。

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