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

Echarts資料視覺化series-map地圖全解：

mytextStyle={
    color:"#333",                //文字顏色
    fontStyle:"normal",         //italic斜體  oblique傾斜
    fontWeight:"normal",        //文字粗細bold   bolder   lighter  100 | 200 | 300 | 400...
    fontFamily:"sans-serif",    //字體系列
    fontSize:18,                  //字型大小
 

};
mylineStyle={
    color:"#333",               //顏色，'rgb(128, 128, 128)'，'rgba(128, 128, 128, 0.5)'，支援線性漸變，徑向漸變，紋理填充
    shadowColor:"red",          //陰影顏色
    shadowOffsetX:0,            //陰影水平方向上的偏移距離。
    shadowOffsetY:0,            //陰影垂直方向上的偏移距離
    shadowBlur:10,              //圖形陰影的模糊大小。
    type:"solid"
 
,               //座標軸線線的型別，solid，dashed，dotted
    width:1,                    //座標軸線線寬
    opacity:1,                  //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
myareaStyle={
    color:['rgba(250,250,250,0.3)','rgba(200,200,200,0.3)'],//分隔區域顏色。分隔區域會按陣列中顏色的順序依次迴圈設定顏色。預設是一個深淺的間隔色。
    shadowColor:"red",          //陰影顏色
    shadowOffsetX:0
 
,            //陰影水平方向上的偏移距離。
    shadowOffsetY:0,            //陰影垂直方向上的偏移距離
    shadowBlur:10,              //圖形陰影的模糊大小。
    opacity:1,                  //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形
};
myitemStyle={
    color:"red",                 //顏色
    borderColor:"#000",         //邊框顏色
    borderWidth:0,               //柱條的描邊寬度，預設不描邊。
    borderType:"solid",         //柱條的描邊型別，預設為實線，支援 'dashed', 'dotted'。
    barBorderRadius:0,          //柱形邊框圓角半徑，單位px，支援傳入陣列分別指定柱形4個圓角半徑。
    shadowBlur:10,               //圖形陰影的模糊大小。
    shadowColor:"#000",         //陰影顏色
    shadowOffsetX:0,            //陰影水平方向上的偏移距離。
    shadowOffsetY:0,            //陰影垂直方向上的偏移距離。
    opacity:1,                   //圖形透明度。支援從 0 到 1 的數字，為 0 時不繪製該圖形。
};
mylabel={
    show:false,                  //是否顯示標籤。
    position:"inside",          //標籤的位置。// 絕對的畫素值[10, 10],// 相對的百分比['50%', '50%'].'top','left','right','bottom','inside','insideLeft','insideRight','insideTop','insideBottom','insideTopLeft','insideBottomLeft','insideTopRight','insideBottomRight'
    offset:[30, 40],             //是否對文字進行偏移。預設不偏移。例如：[30, 40] 表示文字在橫向上偏移 30，縱向上偏移 40。
    formatter:'{b}: {c}',       //標籤內容格式器。模板變數有 {a}、{b}、{c}，分別表示系列名，資料名，資料值。
    textStyle:mytextStyle
};
mypoint={
    symbol:"pin",               //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    symbolSize:50,              //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
    symbolRotate:0,             //標記的旋轉角度。注意在 markLine 中當 symbol 為 'arrow' 時會忽略 symbolRotate 強制設定為切線的角度。
    symbolOffset:[0,0],         //標記相對於原本位置的偏移。預設情況下，標記會居中置放在資料對應的位置
    silent:false,               //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
    label:{
        normal:mylabel,
        emphasis:mylabel
    },
    itemStyle:{
        normal:myitemStyle,
        emphasis:myitemStyle
    }
};
myline={
    symbol:["pin","circle"],    //圖形 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
    symbolSize:50,              //標記的大小，可以設定成諸如 10 這樣單一的數字，也可以用陣列分開表示寬和高，例如 [20, 10] 表示標記寬為20，高為10。
    precision:2,                //標線數值的精度，在顯示平均值線的時候有用。
    silent:false,               //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
    label:{
        normal:mylabel,
        emphasis:mylabel
    },
    lineStyle:{
        normal:mylineStyle,
        emphasis:mylineStyle
    }
};
myarea={
    silent:false,               //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
    label:{
        normal:mylabel,
        emphasis:mylabel
    },
    itemStyle:{
        normal:myitemStyle,
        emphasis:myitemStyle
    }
};
series=[
{
    type:"map",                                 //地圖資料表
    map:"china",                                //地圖型別。world世界地圖，china中國地圖
    roam:false,                                 //是否開啟滑鼠縮放和平移漫遊。預設不開啟。如果只想要開啟縮放或者平移，可以設定成 'scale' 或者 'move'。設定成 true 為都開啟
    center:[115.97, 29.71],                     //當前視角的中心點，用經緯度表示
    aspectScale:0.75,                           //這個引數用於 scale 地圖的長寬比。
    boundingCoords: [[-180, 90], [180, -90]],  //二維陣列，定義定位的左上角以及右下角分別所對應的經緯度
    zoom:1,                                     //當前視角的縮放比例
    scaleLimit:{                                //所屬元件的z分層，z值小的圖形會被z值大的圖形覆蓋
        min:1,                                  //最小的縮放值
        max:1,                                  //最大的縮放值
    },
    nameMap:{                                   //自定義地區的名稱對映
        'China' : '中國'
    },
    selectedMode: false ,                      //選中模式，表示是否支援多個選中，預設關閉，支援布林值和字串，字串取值可選'single'表示單選，或者'multiple'表示多選。
    label:{                                     //圖形上的文字標籤，可用於說明圖形的一些資料資訊，比如值，名稱等
        normal:{
            show:false,                          //是否在普通狀態下顯示標籤。
            textStyle:mytextStyle,              //普通狀態下的標籤文字樣式。
        },
        emphasis:{
            show:false,                         //是否在高亮狀態下顯示標籤。
            textStyle:mytextStyle              //高亮狀態下的標籤文字樣式。
        }
    },
    itemStyle:{                                 //地圖區域的多邊形 圖形樣式
        normal:myitemStyle,
        emphasis:myitemStyle
    },
    zlevel:0,                                   //所屬圖形的 zlevel 值。
    z:2,                                         //所屬圖形的 z 值。
    left:"10%",                                 //元件離容器左側的距離,百分比字串或整型數字
    top:60,                                      //元件離容器上側的距離，百分比字串或整型數字
    right:"auto",                               //元件離容器右側的距離,百分比字串或整型數字
    bottom:"auto",                              //元件離容器下側的距離,百分比字串或整型數字
    layoutCenter:['30%', '30%'],                //地圖中心在螢幕中的位置
    layoutSize:100,                              //地圖的大小,支援相對於螢幕寬高的百分比或者絕對的畫素大小。
    mapValueCalculation:"sum",                  //多個擁有相同地圖型別的系列會使用同一個地圖展現，如果多個系列都在同一個區域有值，目前有：'sum' 取和。'average' 取平均值。'max' 取最大值。'min' 取最小值。
    showLegendSymbol:true,                      //在圖例相應區域顯示圖例的顏色標識（系列標識的小圓點），存在 legend 元件時生效。
    silent:false,                                //圖形是否不響應和觸發滑鼠事件，預設為 false，即響應和觸發滑鼠事件。
    data: [
        {name: '資料1',value: 10},
        {name: '資料2',value: 20}
    ],
    //markPoint:同bar
    //markLine:同bar
    //markArea:同bar
    tooltip:tooltip 
},


];