Echarts資料視覺效果visualMap，開發全解+完美注釋

全棧工程師開發手冊 （作者：欒鵬）

Echarts資料視覺效果開發代碼注釋全解
Echarts資料視覺效果開發參數配置全解

6大公用組件詳解（點擊進入）：
title詳解、 tooltip詳解、toolbox詳解、legend詳解、dataZoom詳解、visualMap全解

5大座標系詳解（點擊進入）：
地理座標系geo詳解、grid直角座標系（xAxis、yAxis）詳解、parallel平行座標系詳解、polar極座標系詳解、radar雷達座標系詳解

19種圖表類型詳解（點擊進入，待續）：
series-bar直條圖詳解、series-effectscatter特效散佈圖、series-graph關係圖、series-heatmap熱力圖、series-line線圖、series-map地圖、series-pie餅圖、series-radar雷達圖、series-scatter散佈圖

圖表行為和圖表事件：
action圖表行為、event圖表事件 Echarts資料視覺效果visualMap全解：

visualMap=[                                     //視覺映射組件，用於進行『視覺編碼』，也就是將資料對應到視覺元素。視覺元素可以是：symbol: 圖元的圖形類別。symbolSize: 圖元的大小。color: 圖元的顏色。                                                 // colorAlpha: 圖元的顏色的透明度。opacity: 圖元以及其附屬物（如文字標籤）的透明度。colorLightness: 顏色的明暗度。colorSaturation: 顏色的飽和度。colorHue: 顏色的色調。    {        show:true,                              //是否顯示 visualMap-continuous 組件。如果設定為 false，不會顯示，但是資料對應的功能還存在        type: 'continuous',                     // 定義為連續型 viusalMap        min:10,                                  //指定 visualMapContinuous 組件的允許的最小值        max:100,                                 //指定 visualMapContinuous 組件的允許的最大值        range:[15, 40],                          //指定手柄對應數值的位置。range 應在 min max 範圍內        calculable:true,                        //是否顯示拖拽用的手柄（手柄能拖拽調整選中範圍）        realtime:true,                          //拖拽時，是否即時更新        inverse:false,                          //是否反轉 visualMap 組件        precision:0,                            //資料展示的小數精度，預設為0，無小數點        itemWidth:20,                           //圖形的寬度，即長條的寬度。        itemHeight:140,                         //圖形的高度，即長條的高度。        align:"auto",                           //指定組件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。        text:['High', 'Low'],                   //兩端的文本        textGap:10,                              //兩端文字主體之間的距離，單位為px        dimension:2,                            //指定用資料的『哪個維度』，映射到視覺元素上。『資料』即 series.data。 可以把 series.data 理解成一個二維數組,其中每個列是一個維度,預設取 data 中最後一個維度        seriesIndex:1,                          //指定取哪個系列的資料，即哪個系列的 series.data,預設取所有系列        hoverLink:true,                         //滑鼠懸浮到 visualMap 組件上時，滑鼠位置對應的數值 在 圖表中對應的圖形元素，會高亮        inRange:{                               //定義 在選中範圍中 的視覺元素            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],            symbolSize: [30, 100]        },        outOfRange:{  //定義 在選中範圍外 的視覺元素。            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],            symbolSize: [30, 100]        },        zlevel:0,                                   //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面        z:2,                                         //所屬組件的z分層，z值小的圖形會被z值大的圖形覆蓋        left:"center",                              //組件離容器左側的距離,'left', 'center', 'right','20%'        top:"top",                                   //組件離容器上側的距離,'top', 'middle', 'bottom','20%'        right:"auto",                               //組件離容器右側的距離,'20%'        bottom:"auto",                              //組件離容器下側的距離,'20%'        orient:"vertical",                         //圖例排列方向        padding:5,                                   //圖例內邊距，單位px  5  [5, 10]  [5,10,5,10]        backgroundColor:"transparent",            //標題背景色        borderColor:"#ccc",                         //邊框顏色        borderWidth:0,                               //邊框線寬        textStyle:mytextStyle,                      //文本樣式        formatter: function (value) {                 //標籤的格式化工具。            return 'aaaa' + value;                    // 範圍標籤顯示內容。        }    },    {        show:true,                          //是否顯示 visualMap-continuous 組件。如果設定為 false，不會顯示，但是資料對應的功能還存在        type: 'piecewise',                  // 定義為分段型 visualMap        splitNumber:5,                      //對於連續型資料，自動平均切分成幾段。預設為5段        pieces: [                           //自訂『分段式視覺映射組件（visualMapPiecewise）』的每一段的範圍，以及每一段的文字，以及每一段的特別的樣式            {min: 1500},                     // 不指定 max，表示 max 為無限大（Infinity）。            {min: 900, max: 1500},            {min: 310, max: 1000},            {min: 200, max: 300},            {min: 10, max: 200, label: '10 到 200（自訂label）'},            {value: 123, label: '123（自訂特殊顏色）', color: 'grey'}, // 表示 value 等於 123 的情況。            {max: 5}                        // 不指定 min，表示 min 為無限大（-Infinity）。        ],        categories:['嚴重汙染', '重度汙染', '中度汙染', '輕度汙染', '良', '優'],  //用於表示離散型資料（或可以稱為類型資料、枚舉型資料）的全集        min:10,                             //指定 visualMapContinuous 組件的允許的最小值        max:100,                             //指定 visualMapContinuous 組件的允許的最大值        minOpen:true,                       //介面上會額外多出一個『< min』的選塊        maxOpen:true,                       //介面上會額外多出一個『> max』的選塊。        selectedMode:"multiple",           //選擇模式，可以是：'multiple'（多選）。'single'（單選）。        inverse:false,                      //是否反轉 visualMap 組件        precision:0,                        //資料展示的小數精度，預設為0，無小數點        itemWidth:20,                       //圖形的寬度，即長條的寬度。        itemHeight:140,                     //圖形的高度，即長條的高度。        align:"auto",                       //指定組件中手柄和文字的擺放位置.可選值為：'auto' 自動決定。'left' 手柄和label在右。'right' 手柄和label在左。'top' 手柄和label在下。'bottom' 手柄和label在上。        text:['High', 'Low'],               //兩端的文本        textGap:10,                          //兩端文字主體之間的距離，單位為px        showLabel:true,                     //是否顯示每項的文字標籤        itemGap:10,                          //每兩個圖元之間的間隔距離，單位為px        itemSymbol:"roundRect",             //預設的圖形。可選值為： 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'        dimension:2,                          //指定用資料的『哪個維度』，映射到視覺元素上。『資料』即 series.data。 可以把 series.data 理解成一個二維數組,其中每個列是一個維度,預設取 data 中最後一個維度        seriesIndex:1,                        //指定取哪個系列的資料，即哪個系列的 series.data,預設取所有系列        hoverLink:true,                      //滑鼠懸浮到 visualMap 組件上時，滑鼠位置對應的數值 在 圖表中對應的圖形元素，會高亮        inRange:{                             //定義 在選中範圍中 的視覺元素            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],            symbolSize: [30, 100]        },        outOfRange:{                            //定義 在選中範圍外 的視覺元素。            color: ['#121122', 'rgba(3,4,5,0.4)', 'red'],            symbolSize: [30, 100]        },        zlevel:0,                                   //所屬圖形的Canvas分層，zlevel 大的 Canvas 會放在 zlevel 小的 Canvas 的上面        z:2,                                         //所屬組件的z分層，z值小的圖形會被z值大的圖形覆蓋        left:"center",                              //組件離容器左側的距離,'left', 'center', 'right','20%'        top:"top",                                   //組件離容器上側的距離,'top', 'middle', 'bottom','20%'        right:"auto",                               //組件離容器右側的距離,'20%'        bottom:"auto",                              //組件離容器下側的距離,'20%'        orient:"vertical",                        //圖例排列方向        padding:5,                                   //圖例內邊距，單位px  5  [5, 10]  [5,10,5,10]        backgroundColor:"transparent",            //標題背景色        borderColor:"#ccc",                         //邊框顏色        borderWidth:0,                               //邊框線寬        textStyle:mytextStyle,                      //文本樣式        formatter: function (value) {                //標籤的格式化工具。            return 'aaaa' + value;                   // 範圍標籤顯示內容。        }    }];