首先需要獲取地圖JSON資料包，點此下載（Echarts官方地圖資料，包含世界、中國，及國內各省資料）。

以青海省地圖為例：

程式碼如下：

<script type="text/javascript">
    // 讀取地圖資料
    $.getJSON('./mapjson/province/qinghai.json', function(qinghai)
    {
        // 註冊JSON資料地圖至echarts
        echarts.registerMap('qinghai', qinghai);
        
        var myChart = echarts.init(document.getElementById('map'));
        myChart.showLoading(
        {
            text: 
 
'載入中...',
            color: '#c23531',
            fontSize: '28px',
            textColor: '#000',
            maskColor: 'rgba(255, 255, 255, 0.2)',
            zlevel: 0,
        });
        
        // 字型、柱圖縮放倍數
        var scale = 1;
        
        // 柱狀圖資料
        var xData = ["立項數", "總經費", "資助經費"];
        
 
var xDataUnit = ["項", "萬元", "萬元"];
        var rawData =
        {
            '西寧市': [10, 20, 30],
            '海東市': [10, 30, 20],
            '海北藏族自治州': [20, 30, 10],
            '黃南藏族自治州': [20, 10, 30],
            '海南藏族自治州': [30, 10, 20],
            '果洛藏族自治州': [30, 20, 10],
            '玉樹藏族自治州': [20, 20, 30],
            
 
'海西蒙古族藏族自治州': [30, 30, 20],
        };
        
        // 柱狀圖所在座標，與rawData對應
        var coordData =
        {
            '西寧市': [101.178916, 37.623178],
            '海東市': [102.10327, 36.902916],
            '海北藏族自治州': [99.901059, 38.159435],
            '黃南藏族自治州': [101.219988, 35.517744],
            '海南藏族自治州': [99.619542, 36.280353],
            '果洛藏族自治州': [99.242143, 34.4736],
            '玉樹藏族自治州': [95.008522, 34.504049],
            '海西蒙古族藏族自治州': [93.770785, 37.674663],
        };
        
        // 柱狀圖顏色
        var colorList = ['242, 95, 96', '88, 235, 82', '75, 146, 230'];
        
        // 地圖配置
        var option =
        {
            series: 
            [
                {
                    type: 'map',
                    map: 'qinghai',
                    aspectScale: 1, // 地圖比例
                    zoom: 1.25, // 地圖縮放倍數
                    label:
                    {
                        // 地圖字型，通常狀態
                        normal:
                        {
                            show: true,
                            color:"#fff",
                            fontSize: 12 * scale,
                        },
                        // 地圖字型，選中狀態
                        emphasis:
                        {
                            show: true,
                            fontSize: 12 * scale,
                            color:"#fff"
                        }
                    },
                    itemStyle:
                    {
                        // 地圖區塊樣式，通常狀態
                        normal:
                        {
                            areaColor:
                            {
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops: 
                                [
                                    {
                                        offset: 0,
                                        color: '#073684'
                                    },
                                    {
                                        offset: 1,
                                        color: '#061E3D'
                                    },
                                ],
                            },
                            borderColor: '#215495',
                            borderWidth: 2 * scale,
                        },
                        // 地圖區塊樣式，選中狀態
                        emphasis:
                        {
                            areaColor:
                            {
                                x: 0, y: 0, x2: 0, y2: 1,
                                colorStops:
                                [
                                    {
                                        offset: 0,
                                        color: '#094ab3'
                                    },
                                    {
                                        offset: 1,
                                        color: '#092f5e'
                                    },
                                ],
                            },
                        }
                    },
                },
            ]
        };
        
        myChart.hideLoading();
        myChart.setOption(option, true);
        myChart.resize();
        
        // 遍歷省內所有地區，分別新增柱狀圖
        echarts.util.each(qinghai.features, function(dataItem, idx)
        {
            // 從rawData中獲取當前地區對應的柱狀圖資料
            var thisData = rawData[dataItem.properties.name];
            // 根據coordData中當前地區經緯度計算柱狀圖在圖表內的對應座標
            var coord = myChart.convertToPixel({seriesIndex: 0}, coordData[dataItem.properties.name]);
            
            // 生成柱狀圖資料
            var tmpOption =
            {
                xAxis : [],
                yAxis : [],
                grid : [],
                series : [],
                tooltip :
                {
                    trigger: 'item',
                    axisPointer:
                    {
                        type: 'none'
                    },
                    textStyle:
                    {
                        fontSize: 12 * scale,
                    },
                    formatter: function(params)
                    {
                        var returnStr = '';
                        if(params.componentSubType == 'bar')
                        {
                            returnStr += params.marker + ' ';
                            returnStr += params.name + '：' + params.value;
                            returnStr += ' ' + xDataUnit[params.dataIndex];
                        }
                        
                        return returnStr;
                    }
                }
            };
            
            // 生成柱狀圖x軸配置
            tmpOption.xAxis.push(
            {
                id: idx,
                gridId: idx,
                splitLine:
                {
                    show: false
                },
                axisTick:
                {
                    show: false
                },
                axisLabel:
                {
                    show: false
                },
                data: xData,
                z: 100
            });
            
            // 生成柱狀圖y軸配置
            tmpOption.yAxis.push(
            {
                id: idx,
                gridId: idx,
                splitLine:
                {
                    show: false
                },
                axisTick:
                {
                    show: false
                },
                axisLabel:
                {
                    show: false
                },
                z: 100
            });
            
            // 配置柱狀圖繪製大小、位置
            tmpOption.grid.push(
            {
                id: idx,
                width: 30 * scale,
                height: 40 * scale,
                left: coord[0],
                top: coord[1],
                z: 100
            });
            
            // 生成柱狀圖資料
            tmpOption.series.push(
            {
                id: idx,
                type: 'bar',
                xAxisId: idx,
                yAxisId: idx,
                barGap: 0,
                barCategoryGap: 0,
                data: thisData,
                z: 100,
                itemStyle:
                {
                    normal:
                    {
                        color: function(params)
                        {
                            return new echarts.graphic.LinearGradient(
                                0, 0, 0, 1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(' + colorList[params.dataIndex] + ', 1)'
                                    },
                                    {
                                        offset: 0.4,
                                        color: 'rgba(' + colorList[params.dataIndex] + ', 0.5)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(' + colorList[params.dataIndex] + ', 0.2)'
                                    },
                                ], false);
                        }
                    }
                }
            });
            
            myChart.setOption(tmpOption);
        });
    })
</script>