連續(xù)型視覺映射組件（visualMapContinuous）的屬性

visualMap[i]-continuous

連續(xù)型視覺映射組件（visualMapContinuous）

（參考視覺映射組件（visualMap）的介紹）

展現(xiàn)形式如下圖：

點(diǎn)擊編輯實(shí)例 》》

visualMapContinuous中，可以通過 visualMap.calculable 來顯示或隱藏手柄（手柄能拖拽改變值域）。

visualMap[i]-continuous.type   |   string

[ default: continuous ]

視覺映射組件類型為連續(xù)型。

visualMap[i]-continuous.min   |   number

指定 visualMapContinuous 組件的允許的最小值。'min' 必須用戶指定。[visualMap.min, visualMax.max] 形成了視覺映射的『定義域』。

visualMap[i]-continuous.max   |   number

指定 visualMapContinuous 組件的允許的最大值。'max' 必須用戶指定。[visualMap.min, visualMax.max] 形成了視覺映射的『定義域』。

visualMap[i]-continuous.range   |   Array

指定手柄對(duì)應(yīng)數(shù)值的位置。range 應(yīng)在 min max 范圍內(nèi)。例如：

chart.setOption({
    visualMap: {
        min: 0,
        max: 100,
        // 兩個(gè)手柄對(duì)應(yīng)的數(shù)值是 4 和 15
        range: [4, 15],
        ...
    }
});

setOption 改變 min、max 時(shí) range 的自適應(yīng)

• 如果 range 不設(shè)置（或設(shè)置為 null）

例如：
chart.setOption({visualMap: {min: 10, max: 300}}); // 不設(shè)置 range，則 range 默認(rèn)為 [min, max]，即 [10, 300]。
chart.setOption({visualMap: {min: 0, max: 400}}); // 再次使用 setOption 改變 min、max。
// 此時(shí) range 也自然會(huì)更新成改變過后的 [min, max]，即 [0, 400]。

• 如果 range 被以具體值設(shè)置了（例如設(shè)置為 [10, 300]）

例如：
chart.setOption({visualMap: {min: 10, max: 300, range: [20, 80]}}); // 設(shè)置了 range
chart.setOption({visualMap: {min: 0, max: 400}}); // 再次使用 setOption 改變 min、max。
// 此時(shí) range 不會(huì)改變而仍維持本來的數(shù)值，仍為 [20, 80]。
chart.setOption({visualMap: {range: null}}); // 再把 range 設(shè)為 null。
// 則 range 恢復(fù)為 [min, max]，即 [0, 400]，同時(shí)也恢復(fù)了自動(dòng)隨 min max 而改變的能力。

getOption 得到的 range 總是 Array，不會(huì)為 null 或 undefined。

visualMap[i]-continuous.calculable   |   boolean

[ default: false ]

是否顯示拖拽用的手柄（手柄能拖拽調(diào)整選中范圍）。

（注：為兼容 ECharts2，當(dāng) visualMap.type 未指定時(shí)，假如設(shè)置了 'calculable'，則type自動(dòng)被設(shè)置為'continuous'，無(wú)視 visualMap-piecewise.splitNumber 等設(shè)置。所以，建議使用者不要不指定  visualMap.type，否則表意不清晰。）

visualMap[i]-continuous.realtime   |   boolean

[ default: true ]

拖拽時(shí)，是否實(shí)時(shí)更新。

• 如果為ture則拖拽手柄過程中實(shí)時(shí)更新圖表視圖。
• 如果為false則拖拽結(jié)束時(shí)，才更新視圖。

visualMap[i]-continuous.inverse   |   boolean

[ default: false ]

是否反轉(zhuǎn) visualMap 組件。

當(dāng)inverse為false時(shí)，數(shù)據(jù)大小的位置規(guī)則，和直角坐標(biāo)系相同，即：

• 當(dāng) visualMap.orient 為 'vertical' 時(shí)，數(shù)據(jù)上大下小。
• 當(dāng) visualMap.orient 為 'horizontal' 時(shí)，數(shù)據(jù)右大左小。

當(dāng) inverse 為 true 時(shí)，相反。

visualMap[i]-continuous.precision   |   number

[ default: 0 ]

數(shù)據(jù)展示的小數(shù)精度，默認(rèn)為0，無(wú)小數(shù)點(diǎn)。

visualMap[i]-continuous.itemWidth   |   number

[ default: 20 ]

圖形的寬度，即長(zhǎng)條的寬度。

visualMap[i]-continuous.itemHeight   |   number

[ default: 140 ]

圖形的高度，即長(zhǎng)條的高度。

visualMap[i]-continuous.align   |   string

[ default: 'auto' ]

指定組件中手柄和文字的擺放位置，可選值為：

• 'auto'：自動(dòng)決定。
• 'left'：手柄和 label 在右，orient 為 horizontal 時(shí)有效。
• 'right'：手柄和 label 在左，orient 為 horizontal 時(shí)有效。
• 'top'：手柄和 label 在下，orient 為 vertical 時(shí)有效。
• 'bottom'：手柄和 label 在上，orient 為 vertical 時(shí)有效。

visualMap[i]-continuous.text   |   Array

[ default: null ]

連續(xù)型視覺映射組件兩端的文本，如 ['High', 'Low']。參見例子。

text 中的順序，其實(shí)試試就知道。若要看詳細(xì)的規(guī)則，參見 visualMap.inverse。

visualMap[i]-continuous.textGap   |   Array

[ default: 10 ]

連續(xù)型視覺映射組件兩端文字主體之間的距離，單位為px。參見 visualMap-continuous.text

visualMap[i]-continuous.show   |   boolean

[ default: true ]

是否顯示 visualMap-continuous 組件。如果設(shè)置為 false，不會(huì)顯示，但是數(shù)據(jù)映射的功能還存在。

visualMap[i]-continuous.dimension   |   number

指定用數(shù)據(jù)的『哪個(gè)維度』，映射到視覺元素上?！簲?shù)據(jù)』即 series.data。 可以把 series.data 理解成一個(gè)二維數(shù)組，例如：

[
    [12, 23, 43],
    [12, 23, 43],
    [43, 545, 65],
    [92, 23, 33]
]

其中每個(gè)列是一個(gè)維度，即 dimension。 例如 dimension 為 1 時(shí)，取第二列（即 23，23，545，23），映射到視覺元素上。

默認(rèn)取 data 中最后一個(gè)維度。

visualMap[i]-continuous.seriesIndex   |   number, Array

指定取哪個(gè)系列的數(shù)據(jù)，即哪個(gè)系列的 series.data。

默認(rèn)取所有系列。

visualMap[i]-continuous.hoverLink   |   boolean

[ default: true ]

打開 hoverLink 功能時(shí)，鼠標(biāo)懸浮到 visualMap 組件上時(shí)，鼠標(biāo)位置對(duì)應(yīng)的數(shù)值 在 圖表中對(duì)應(yīng)的圖形元素，會(huì)高亮。

反之，鼠標(biāo)懸浮到圖表中的圖形元素上時(shí)，在 visualMap 組件的相應(yīng)位置會(huì)有三角提示其所對(duì)應(yīng)的數(shù)值。

visualMap[i]-continuous.inRange   |   Object

定義在選中范圍中的視覺元素。（用戶可以和 visualMap 組件交互，用鼠標(biāo)或觸摸選擇范圍）

可選的視覺元素有：

• symbol: 圖元的圖形類別。
• symbolSize: 圖元的大小。
• color: 圖元的顏色。
• colorAlpha: 圖元的顏色的透明度。
• opacity: 圖元以及其附屬物（如文字標(biāo)簽）的透明度。
• colorLightness: 顏色的明暗度，參見 HSL。
• colorSaturation: 顏色的飽和度，參見 HSL。
• colorHue: 顏色的色調(diào)，參見 HSL。

inRange 能定義目標(biāo)系列（參見 visualMap-continuous.seriesIndex）視覺形式，也同時(shí)定義了 visualMap-continuous 本身的視覺樣式。通俗來講就是，假如 visualMap-continuous控制的是散點(diǎn)圖，那么 inRange 同時(shí)定義了散點(diǎn)圖的 顏色、尺寸 等，也定義了 visualMap-continuous 本身的 顏色、尺寸 等。這二者能對(duì)應(yīng)上。

定義方式，例如：

visualMap: [
    {
        ...,
        inRange: {
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        }
    }
]

如果想分別定義 visualMap-continuous 本身的視覺樣式和 目標(biāo)系列 的視覺樣式，則這樣定義：

visualMap: [
    {
        ...,
        // 表示 目標(biāo)系列 的視覺樣式。
        target: {
            inRange: {
                color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
                symbolSize: [60, 200]
            }
        },
        // 表示 visualMap-continuous 本身的視覺樣式。
        controller: {
            inRange: {
                symbolSize: [30, 100]
            }
        }
    }
]

或者這樣定義：

visualMap: [
    {
        ...,
        // 表示 目標(biāo)系列 的視覺樣式 和 visualMap-continuous 共有的視覺樣式。
        inRange: {
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [60, 200]
        },
        // 表示 visualMap-continuous 本身的視覺樣式，會(huì)覆蓋共有的視覺樣式。比如，symbolSize 覆蓋成為 [30, 100]，而 color 不變。
        controller: {
            inRange: {
                symbolSize: [30, 100]
            }
        }
    }
]

關(guān)于視覺通道

• inRange 中，可以有任意幾個(gè)的『視覺通道』定義（如 color、symbolSize 等）。這些視覺通道，會(huì)被同時(shí)采用。
• 一般來說，建議使用 透明度（opacity） ，而非 顏色透明度（colorAlpha） （他們細(xì)微的差異在于，前者能也同時(shí)控制圖元中的附屬物（如 label）的透明度，而后者只能控制圖元本身顏色的透明度）。
• 視覺映射的方式：支持兩種方式：線性映射、查表映射。

視覺通道 -- 線性映射

線性映射 表示 series.data 中的每一個(gè)值（dataValue）會(huì)經(jīng)過線性映射計(jì)算，從 [visualMap.min, visualMap.max] 映射到設(shè)定的 [visual value 1, visual value 2] 區(qū)間中的某一個(gè)視覺的值（下稱 visual value）。

例如，我們?cè)O(shè)置了 [visualMap.min, visualMap.max] 為 [0, 100]，并且我們有 series.data: [50, 10, 100]。我們想將其映射到范圍為 [0.4, 1] 的 opacity 上，從而達(dá)到用透明度表達(dá)數(shù)值大小的目的。那么 visualMap 組件會(huì)對(duì) series.data 中的每一個(gè) dataValue 做線性映射計(jì)算，得到一個(gè) opacityValue。最終得到的 opacityValues 為 [0.7, 0.44, 1]。

visual 范圍也可以反向，例如上例，可以設(shè)定 opacity 范圍為 [1, 0.4]，則上例得到的 opacityValues 為 [0.7, 0.96, 0.4]。

注意，[visualMap.min, visualMap.max] 須手動(dòng)設(shè)置，不設(shè)置則默認(rèn)取 [0, 100]，而非 series.data 中的 dataMin 和 dataMax。

如何設(shè)定為線性映射？以下情況時(shí)，會(huì)設(shè)定為 線性映射：

• 當(dāng) visualMap 為 visualMap-continuous 時(shí)，或者
• 當(dāng) visualMap 為 visualMap-piecewise 且未設(shè)置 visualMap-piecewise.categories 時(shí)。

視覺通道的值（visual value）：

• 視覺通道的值一般都以 Array 形式表示，例如：color: ['#333', '#777']。
• 如果寫成 number 或 string，會(huì)轉(zhuǎn)成 Array。例如，寫成 opacity: 0.4 會(huì)轉(zhuǎn)成 opacity: [0.4, 0.4]，color: '#333' 會(huì)轉(zhuǎn)成 color: ['#333', '#333']。
• 對(duì)于 圖形大小（symbolSize）、透明度（opacity）、顏色透明度（colorAlpha）、顏色明暗度（colorLightness）、顏色飽和度（colorSaturation）、色調(diào)（colorHue）：形如Array 的視覺范圍總是表示：[最小數(shù)據(jù)值對(duì)應(yīng)的視覺值, 最大數(shù)據(jù)值對(duì)應(yīng)的視覺值]。比如：colorLightness: [0.8, 0.2]，表示 series.data 中，和 visualMap.min 相等的值（如果有的話）映射到 顏色明暗 的 0.8，和 visualMap.max 相等的值（如果有的話）映射到 顏色明暗 的 0.2，中間其他數(shù)據(jù)值，按照線性計(jì)算出映射結(jié)果。
• 對(duì)于顏色（color），使用數(shù)組表示例如：['#333', '#78ab23', 'blue']。意思就是以這三個(gè)點(diǎn)作為基準(zhǔn)，形成一種『漸變』的色帶，數(shù)據(jù)映射到這個(gè)色帶上。也就是說，與 visualMap.min 相等的值會(huì)映射到 '#333'，與 visualMap.max 相等的值會(huì)映射到 'blue'。對(duì)于 visualMap.min 和 visualMap.max 中間的其他點(diǎn)，以所給定的 '#333', '#78ab23', 'blue' 這三個(gè)顏色作為基準(zhǔn)點(diǎn)進(jìn)行分段線性插值，得到映射結(jié)果。
• 對(duì)于圖形類別（symbol）：使用數(shù)據(jù)表示例如：['circle', 'rect', 'diamond']。與 visualMap.min 相等的值會(huì)映射到 'circle'，與 visualMap.max 相等的值會(huì)映射到 'diamond'。對(duì)于 中間的其他點(diǎn)，會(huì)根據(jù)他們和 visualMap.min 和 visualMap.max 的數(shù)值距離，映射到 'circle', 'rect', 'diamond' 中某個(gè)值上。

visual value 的取值范圍：

• 透明度（opacity）、顏色透明度（colorAlpha）、顏色明暗度（colorLightness）、顏色飽和度（colorSaturation），visual value取值范圍是 [0, 1]。
• 色調(diào)（colorHue）取值范圍是 [0, 360]。
• 顏色（color）：顏色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六進(jìn)制格式，比如 '#ccc'。
• 圖形類別（symbol）：

ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通過 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI。

可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導(dǎo)出。

視覺通道 -- 查表映射

查表映射表示 series.data 中的所有值（dataValue）是可枚舉的，會(huì)根據(jù)給定的映射表查表得到映射結(jié)果。

例如，在 visualMap-piecewise 中，我們?cè)O(shè)定了 visualMap-piecewise.categories 為 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']。我們有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']。然后我們可以定立查表映射規(guī)則：color: {'Warden': 'red', 'Demon Hunter': 'black'}，于是 visualMap 組件會(huì)按照表來將 dataValue 映射到 color。

如何設(shè)定為查表映射？當(dāng) visualMap 為 visualMap-piecewise 且設(shè)置了 visualMap-piecewise.categories 時(shí)，會(huì)進(jìn)行查表映射。

視覺通道的值（visual value）：一般使用 Object 或 Array 來表示，例如：

visualMap: {
    type: 'piecewise',
    // categories 定義了 visualMap-piecewise 組件顯示出來的項(xiàng)。
    categories: [
        'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
    ],
    inRange: {
        // visual value 可以配成 Object：
        color: {
            'Warden': 'red',
            'Demon Hunter': 'black',
            '': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都對(duì)應(yīng)到 'green'。
        }
        // visual value 也可以只配一個(gè)單值，表示所有都映射到一個(gè)值，如：
        color: 'green',
        // visual value 也可以配成數(shù)組，這個(gè)數(shù)組須和 categories 數(shù)組等長(zhǎng)，
        // 每個(gè)數(shù)組項(xiàng)和 categories 數(shù)組項(xiàng)一一對(duì)應(yīng)：
        color: ['red', 'black', 'green', 'yellow', 'white']
    }
}

參見示例

修改視覺編碼

如果在圖表被渲染后（即已經(jīng)使用 setOption 設(shè)置了初始 option 之后），想修改 visualMap 的各種 視覺編碼，按照慣例，再次使用 setOption 即可。例如：

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

但請(qǐng)注意：

• visualMap option 中的這幾個(gè)屬性，inRange, outOfRange, target, controller，在 setOption 時(shí)不支持 merge。否則會(huì)帶來過于復(fù)雜的 merge 邏輯。也就是說，setOption 時(shí)，一旦修改了以上幾個(gè)屬性中的一項(xiàng)，其他項(xiàng)也會(huì)被清空，而非保留當(dāng)前狀態(tài)。所以，設(shè)置 visual 值時(shí)，請(qǐng)一次性全部設(shè)置，而非只設(shè)置一部分。
• 不推薦使用 getOption -> 修改option -> setOption 的方式：

// 不推薦這樣做（盡管也能達(dá)到和上面的例子相同的結(jié)果）：
var option = chart.getOption(); // 獲取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改動(dòng)color（我想要改變 color）。
// 如下兩處也要進(jìn)行同步改動(dòng)，否則可能達(dá)不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option設(shè)置回 visualMap

visualMap[i]-continuous.outOfRange   |   Object

定義 在選中范圍外 的視覺元素。（用戶可以和 visualMap 組件交互，用鼠標(biāo)或觸摸選擇范圍）

可選的視覺元素有：

• symbol: 圖元的圖形類別。
• symbolSize: 圖元的大小。
• color: 圖元的顏色。
• colorAlpha: 圖元的顏色的透明度。
• opacity: 圖元以及其附屬物（如文字標(biāo)簽）的透明度。
• colorLightness: 顏色的明暗度，參見 HSL。
• colorSaturation: 顏色的飽和度，參見 HSL。
• colorHue: 顏色的色調(diào)，參見 HSL。

outOfRange 能定義目標(biāo)系列（參見 visualMap-continuous.seriesIndex）視覺形式，也同時(shí)定義了 visualMap-continuous 本身的視覺樣式。通俗來講就是，假如 visualMap-continuous控制的是散點(diǎn)圖，那么 outOfRange 同時(shí)定義了散點(diǎn)圖的 顏色、尺寸 等，也定義了 visualMap-continuous 本身的 顏色、尺寸 等。這二者能對(duì)應(yīng)上。

定義方式，例如：

visualMap: [
    {
        ...,
        outOfRange: {
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [30, 100]
        }
    }
]

如果想分別定義 visualMap-continuous 本身的視覺樣式和 目標(biāo)系列 的視覺樣式，則這樣定義：

visualMap: [
    {
        ...,
        // 表示 目標(biāo)系列 的視覺樣式。
        target: {
            outOfRange: {
                color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
                symbolSize: [60, 200]
            }
        },
        // 表示 visualMap-continuous 本身的視覺樣式。
        controller: {
            outOfRange: {
                symbolSize: [30, 100]
            }
        }
    }
]

或者這樣定義：

visualMap: [
    {
        ...,
        // 表示 目標(biāo)系列 的視覺樣式 和 visualMap-continuous 共有的視覺樣式。
        outOfRange: {
            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],
            symbolSize: [60, 200]
        },
        // 表示 visualMap-continuous 本身的視覺樣式，會(huì)覆蓋共有的視覺樣式。比如，symbolSize 覆蓋成為 [30, 100]，而 color 不變。
        controller: {
            outOfRange: {
                symbolSize: [30, 100]
            }
        }
    }
]

關(guān)于視覺通道

• outOfRange 中，可以有任意幾個(gè)的『視覺通道』定義（如 color、symbolSize 等）。這些視覺通道，會(huì)被同時(shí)采用。
• 一般來說，建議使用 透明度（opacity） ，而非 顏色透明度（colorAlpha） （他們細(xì)微的差異在于，前者能也同時(shí)控制圖元中的附屬物（如 label）的透明度，而后者只能控制圖元本身顏色的透明度）。
• 視覺映射的方式：支持兩種方式：線性映射、查表映射。

視覺通道 -- 線性映射

線性映射 表示 series.data 中的每一個(gè)值（dataValue）會(huì)經(jīng)過線性映射計(jì)算，從 [visualMap.min, visualMap.max] 映射到設(shè)定的 [visual value 1, visual value 2] 區(qū)間中的某一個(gè)視覺的值（下稱 visual value）。

例如，我們?cè)O(shè)置了 [visualMap.min, visualMap.max] 為 [0, 100]，并且我們有 series.data: [50, 10, 100]。我們想將其映射到范圍為 [0.4, 1] 的 opacity 上，從而達(dá)到用透明度表達(dá)數(shù)值大小的目的。那么 visualMap 組件會(huì)對(duì) series.data 中的每一個(gè) dataValue 做線性映射計(jì)算，得到一個(gè) opacityValue。最終得到的 opacityValues 為 [0.7, 0.44, 1]。

visual 范圍也可以反向，例如上例，可以設(shè)定 opacity 范圍為 [1, 0.4]，則上例得到的 opacityValues 為 [0.7, 0.96, 0.4]。

注意，[visualMap.min, visualMap.max] 須手動(dòng)設(shè)置，不設(shè)置則默認(rèn)取 [0, 100]，而非 series.data 中的 dataMin 和 dataMax。

如何設(shè)定為線性映射？以下情況時(shí)，會(huì)設(shè)定為 線性映射：

• 當(dāng) visualMap 為 visualMap-continuous 時(shí)，或者
• 當(dāng) visualMap 為 visualMap-piecewise 且 未設(shè)置 visualMap-piecewise.categories 時(shí)。

視覺通道的值（visual value）：

• 視覺通道的值一般都以 Array 形式表示，例如：color: ['#333', '#777']。
• 如果寫成 number 或 string，會(huì)轉(zhuǎn)成 Array。例如，寫成 opacity: 0.4 會(huì)轉(zhuǎn)成 opacity: [0.4, 0.4]，color: '#333' 會(huì)轉(zhuǎn)成 color: ['#333', '#333']。
• 對(duì)于 圖形大?。╯ymbolSize）、透明度（opacity）、顏色透明度（colorAlpha）、顏色明暗度（colorLightness）、顏色飽和度（colorSaturation）、色調(diào)（colorHue）：形如Array 的視覺范圍總是表示：[最小數(shù)據(jù)值對(duì)應(yīng)的視覺值, 最大數(shù)據(jù)值對(duì)應(yīng)的視覺值]。比如：colorLightness: [0.8, 0.2]，表示 series.data 中，和 visualMap.min 相等的值（如果有的話）映射到 顏色明暗 的 0.8，和 visualMap.max 相等的值（如果有的話）映射到 顏色明暗 的 0.2，中間其他數(shù)據(jù)值，按照線性計(jì)算出映射結(jié)果。
• 對(duì)于 顏色（color），使用數(shù)組表示例如：['#333', '#78ab23', 'blue']。意思就是以這三個(gè)點(diǎn)作為基準(zhǔn)，形成一種『漸變』的色帶，數(shù)據(jù)映射到這個(gè)色帶上。也就是說，與 visualMap.min 相等的值會(huì)映射到 '#333'，與 visualMap.max 相等的值會(huì)映射到 'blue'。對(duì)于 visualMap.min 和 visualMap.max 中間的其他點(diǎn)，以所給定的 '#333', '#78ab23', 'blue' 這三個(gè)顏色作為基準(zhǔn)點(diǎn)進(jìn)行分段線性插值，得到映射結(jié)果。
• 對(duì)于 圖形類別（symbol）：使用數(shù)據(jù)表示例如：['circle', 'rect', 'diamond']。與 visualMap.min 相等的值會(huì)映射到 'circle'，與 visualMap.max 相等的值會(huì)映射到 'diamond'。對(duì)于 中間的其他點(diǎn)，會(huì)根據(jù)他們和 visualMap.min 和 visualMap.max 的數(shù)值距離，映射到 'circle', 'rect', 'diamond' 中某個(gè)值上。

visual value 的取值范圍：

• 透明度（opacity）、顏色透明度（colorAlpha）、顏色明暗度（colorLightness）、顏色飽和度（colorSaturation），visual value取值范圍是 [0, 1]。
• 色調(diào)（colorHue）取值范圍是 [0, 360]。
• 顏色（color）：顏色可以使用 RGB 表示，比如 'rgb(128, 128, 128)'，如果想要加上 alpha 通道，可以使用 RGBA，比如 'rgba(128, 128, 128, 0.5)'，也可以使用十六進(jìn)制格式，比如 '#ccc'。
• 圖形類別（symbol）：

ECharts 提供的標(biāo)記類型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'

也可以通過 'image://url' 設(shè)置為圖片，其中 url 為圖片的鏈接，或者 dataURI。

可以通過 'path://' 將圖標(biāo)設(shè)置為任意的矢量路徑。這種方式相比于使用圖片的方式，不用擔(dān)心因?yàn)榭s放而產(chǎn)生鋸齒或模糊，而且可以設(shè)置為任意顏色。路徑圖形會(huì)自適應(yīng)調(diào)整為合適的大小。路徑的格式參見 SVG PathData?？梢詮?Adobe Illustrator 等工具編輯導(dǎo)出。

視覺通道 -- 查表映射

查表映射 表示 series.data 中的所有值（dataValue）是可枚舉的，會(huì)根據(jù)給定的映射表查表得到映射結(jié)果。

例如，在 visualMap-piecewise 中，我們?cè)O(shè)定了 visualMap-piecewise.categories 為 ['Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin']。我們有 series.data: ['Demon Hunter', 'Death Knight', 'Warden', 'Paladin']。然后我們可以定立查表映射規(guī)則：color: {'Warden': 'red', 'Demon Hunter': 'black'}，于是 visualMap 組件會(huì)按照表來將 dataValue 映射到 color。

如何設(shè)定為查表映射？當(dāng) visualMap 為 visualMap-piecewise 且 設(shè)置了 visualMap-piecewise.categories 時(shí)，會(huì)進(jìn)行查表映射。

視覺通道的值（visual value）：一般使用 Object 或 Array 來表示，例如：

visualMap: {
    type: 'piecewise',
    // categories 定義了 visualMap-piecewise 組件顯示出來的項(xiàng)。
    categories: [
        'Demon Hunter', 'Blademaster', 'Death Knight', 'Warden', 'Paladin'
    ],
    outOfRange: {
        // visual value 可以配成 Object：
        color: {
            'Warden': 'red',
            'Demon Hunter': 'black',
            '': 'green' // 空字串，表示除了'Warden'、'Demon Hunter'外，都對(duì)應(yīng)到 'green'。
        }
        // visual value 也可以只配一個(gè)單值，表示所有都映射到一個(gè)值，如：
        color: 'green',
        // visual value 也可以配成數(shù)組，這個(gè)數(shù)組須和 categories 數(shù)組等長(zhǎng)，
        // 每個(gè)數(shù)組項(xiàng)和 categories 數(shù)組項(xiàng)一一對(duì)應(yīng)：
        color: ['red', 'black', 'green', 'yellow', 'white']
    }
}

參見示例

修改視覺編碼

如果在圖表被渲染后（即已經(jīng)使用 setOption 設(shè)置了初始 option 之后），想修改 visualMap 的各種 視覺編碼，按照慣例，再次使用 setOption 即可。例如：

chart.setOption({
    visualMap: {
        inRange: {color: ['red', 'blue']}
    }
});

但請(qǐng)注意：

• visualMap option 中的這幾個(gè)屬性，inRange, outOfRange, target, controller，在 setOption 時(shí)不支持 merge。否則會(huì)帶來過于復(fù)雜的 merge 邏輯。也就是說，setOption 時(shí)，一旦修改了以上幾個(gè)屬性中的一項(xiàng)，其他項(xiàng)也會(huì)被清空，而非保留當(dāng)前狀態(tài)。所以，設(shè)置 visual 值時(shí)，請(qǐng)一次性全部設(shè)置，而非只設(shè)置一部分。
• 不推薦使用 getOption -> 修改option -> setOption 的方式：

// 不推薦這樣做（盡管也能達(dá)到和上面的例子相同的結(jié)果）：
var option = chart.getOption(); // 獲取所有option。
option.visualMap.inRange.color = ['red', 'blue']; // 改動(dòng)color（我想要改變 color）。
// 如下兩處也要進(jìn)行同步改動(dòng)，否則可能達(dá)不到期望效果。
option.visualMap.target.inRange.color = ['red', 'blue'];
option.visualMap.controller.inRange.color = ['red', 'blue'];
chart.setOption(option); // option設(shè)置回 visualMap

visualMap[i]-continuous.controller   |   Object

visualMap 組件中，控制器 的 inRange outOfRange 設(shè)置。如果沒有這個(gè) controller 設(shè)置，控制器 會(huì)使用外層的 inRange outOfRange 設(shè)置；如果有這個(gè) controller 設(shè)置，則會(huì)采用這個(gè)設(shè)置。適用于一些控制器視覺效果需要特殊定制或調(diào)整的場(chǎng)景。

更多內(nèi)容請(qǐng)參考：視覺映射組件的controller屬性

visualMap[i]-continuous.zlevel   |   number

[ default: 0 ]

所有圖形的 zlevel 值。

zlevel 用于 Canvas 分層，不同 zlevel 值的圖形會(huì)放置在不同的 Canvas 中，Canvas 分層是一種常見的優(yōu)化手段。我們可以把一些圖形變化頻繁（例如有動(dòng)畫）的組件設(shè)置成一個(gè)單獨(dú)的zlevel。需要注意的是過多的 Canvas 會(huì)引起內(nèi)存開銷的增大，在手機(jī)端上需要謹(jǐn)慎使用以防崩潰。

zlevel 大的 Canvas 會(huì)放在 zlevel 小的 Canvas 的上面。

visualMap[i]-continuous.z   |   number

[ default: 4 ]

組件的所有圖形的 z 值?？刂茍D形的前后順序。z 值小的圖形會(huì)被 z 值大的圖形覆蓋。

z 相比 zlevel 優(yōu)先級(jí)更低，而且不會(huì)創(chuàng)建新的 Canvas。

visualMap[i]-continuous.left   |   string, number

[ default: 0 ]

visualMap 組件離容器左側(cè)的距離。

left 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'left', 'center', 'right'。

如果 left 的值為'left', 'center', 'right'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

visualMap[i]-continuous.top   |   string, number

[ default: auto ]

visualMap 組件離容器上側(cè)的距離。

top 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比，也可以是 'top', 'middle', 'bottom'。

如果 top 的值為'top', 'middle', 'bottom'，組件會(huì)根據(jù)相應(yīng)的位置自動(dòng)對(duì)齊。

visualMap[i]-continuous.right   |   string, number

[ default: auto ]

visualMap 組件離容器右側(cè)的距離。

right 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

visualMap[i]-continuous.bottom   |   string, number

[ default: 0 ]

visualMap 組件離容器下側(cè)的距離。

bottom 的值可以是像 20 這樣的具體像素值，可以是像 '20%' 這樣相對(duì)于容器高寬的百分比。

visualMap[i]-continuous.orient   |   string

[ default: 'vertical' ]

如何放置 visualMap 組件，水平（'horizontal'）或者豎直（'vertical'）。

visualMap[i]-continuous.padding   |   number, Array

[ default: 5 ]

visualMap-continuous 內(nèi)邊距，單位為 px，默認(rèn)各方向內(nèi)邊距為 5px，接受數(shù)組分別設(shè)定上右下左邊距。

使用示例：

// 設(shè)置內(nèi)邊距為 5
padding: 5
// 設(shè)置上下的內(nèi)邊距為 5，左右的內(nèi)邊距為 10
padding: [5, 10]
// 分別設(shè)置四個(gè)方向的內(nèi)邊距
padding: [
    5,  // 上
    10, // 右
    5,  // 下
    10, // 左
]

visualMap[i]-continuous.backgroundColor   |   Color

[ default: 'rgba(0,0,0,0)' ]

設(shè)置連續(xù)型視覺映射組件的背景色。

visualMap[i]-continuous.borderColor   |   Color

[ default: '#ccc' ]

設(shè)置連續(xù)型視覺映射組件的邊框顏色。

visualMap[i]-continuous.borderWidth   |   number

[ default: 0 ]

設(shè)置連續(xù)型視覺映射組件邊框線寬，單位為 px。

visualMap[i]-continuous.color   |   Array

[ default: ['#bf444c', '#d88273', '#f6efa6'] ]

這個(gè)配置項(xiàng)，是為了兼容 ECharts 2 而存在，ECharts 3 中已經(jīng)不推薦使用。它的功能已經(jīng)移到了 visualMap-continuous.inRange 和 visualMap-continuous.outOfRange 中。

如果要使用，則須注意，color屬性中的順序是由數(shù)值 大 到 小，但是 visualMap-continuous.inRange 或 visualMap-continuous.outOfRange 中 color 的順序，總是由數(shù)值小到大。二者不一致。

visualMap[i]-continuous.textStyle   |   Object

設(shè)置連續(xù)型視覺映射組件文字的樣式。更多內(nèi)容請(qǐng)參考：設(shè)置視覺映射組件的文字樣式

visualMap[i]-continuous.formatter   |   string, Function

標(biāo)簽的格式化工具。

• 如果為string，表示模板，例如：aaaa{value}。其中 {value} 是當(dāng)前的范圍邊界值。
• 如果為 Function，表示回調(diào)函數(shù)，形如：

formatter: function (value) {
    return 'aaaa' + value; // 范圍標(biāo)簽顯示內(nèi)容。
}