有个需求，需要这样的效果，正值为绿色，负值为红色，绝对值愈大颜色愈深
旁边虽然有程式码，但看起来相当复杂， 乍看之下不容易看懂
查了一下文档，简单的写了些笔记
先附完整程式码
const option = {
tooltip: {},
series: [
{
name: 'test treemap',
type: 'treemap',
visualMin: -100, //决定颜色的最小值
visualMax: 100, //决定颜色的最大值
visualDimension: 1, //决定颜色看 value 的哪一个值, 1=> 第2个值
levels: [
{ //第一层
color: ['#942e38', '#aaa', '#269f3c'], //颜色
colorMappingBy: 'value', //用value来决定颜色
itemStyle: {
borderWidth: 2,
borderColor: '#333',
gapWidth: 1
}
},
{ //第二层 => 可设定不同颜色
color: ['#942e38', '#aaa', '#269f3c'],
colorMappingBy: 'value',
itemStyle: {
borderWidth: 1,
borderColor: '#333',
gapWidth: 1
}
},
],
data: [
{
name: 'A',
value: [15, -35], // 第一层: 第一个值决定区块大小，第二个值决定颜色
children: [
{
name: 'A01',
value: [10, -70] // 第二层: 第一个值决定区块大小，第二个值决定颜色
},
{
name: 'A02',
value: [3, 20]
},
{
name: 'A03',
value: [2, 60]
}
]
},
{
name: 'B',
value: [10, 47],
children: [
{
name: 'B01',
value: [5, 100]
},
{
name: 'B02',
value: [4, -20]
},
{
name: 'B03',
value: [1, 50]
},
]
},
{
name: 'C',
value: [10, 5],
},
]
}
]
};
重点在以下宣告，注意可设定不同层用不同颜色
color: ['#942e38', '#aaa', '#269f3c'], //颜色
colorMappingBy: 'value', //用value来决定颜色
然后
visualMin: -100, //决定颜色的最小值
visualMax: 100, //决定颜色的最大值
visualDimension: 1, //决定颜色看 value 的哪一个值, 1=> 第2个值
以以下的值为例：第一个值决定区块的大小，第二个值决定颜色(因为 visualDimension= 1)
然后值为 -50 ⇒ 0 是灰色(#aaa)，-100是暗红色(#942e38)，所以 -50 是浅红色
name: 'A',
value: [10, -50],
最后画出的图表如下，符合预期
其实程式很简单，不晓得官网的范例为什么要写的那么复杂
