有個需求，需要這樣的效果，正值為綠色，負值為紅色，絕對值愈大顏色愈深
旁邊雖然有程式碼，但看起來相當 複雜，乍看之下不容易看懂
查了一下文檔，簡單的寫了些筆記
先附完整程式碼
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],
最後畫出的圖表如下，符合預期
其實程式很簡單，不曉得官網的範例為什麼要寫的那麼複雜
