Echarts 在地圖上繪制柱狀圖

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

以青海省地圖為例：

 

代碼如下：

// 讀取地圖數據
$.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 =
    {
        '西寧市': ['熱點1', '熱點2'],
        '海東市': ['熱點3', '熱點4'],
        '海北藏族自治州': ['熱點2', '熱點3'],
        '黃南藏族自治州': ['熱點2', '熱點4'],
        '海南藏族自治州': ['熱點1', '熱點3'],
        '果洛藏族自治州': ['熱點4', '熱點2'],
        '玉樹藏族自治州': ['熱點4', '熱點3'],
        '海西蒙古族藏族自治州': ['熱點2', '熱點1'],
    };
    var rawData =
    {
        '西寧市': [92, 43],
        '海東市': [26, 11],
        '海北藏族自治州': [59, 33],
        '黃南藏族自治州': [66, 42],
        '海南藏族自治州': [75, 50],
        '果洛藏族自治州': [43, 23],
        '玉樹藏族自治州': [10, 7],
        '海西蒙古族藏族自治州': [98, 81],
    };
    
    // 柱狀圖所在坐標，與rawData對應
    var coordData =
    {
        '西寧市': [101.178916, 38.423178],
        '海東市': [102.10327, 37.802916],
        '海北藏族自治州': [99.901059, 39.159435],
        '黃南藏族自治州': [101.219988, 36.517744],
        '海南藏族自治州': [99.619542, 37.280353],
        '果洛藏族自治州': [99.242143, 34.8736],
        '玉樹藏族自治州': [95.008522, 34.704049],
        '海西蒙古族藏族自治州': [94.770785, 37.874663],
    };
    
    // 柱狀圖顏色
    var colorList = ['31 ,210, 240', '61, 233, 147'];
    
    // 地圖配置
    var option =
    {
        geo: 
        [
            {
                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: '#08429F'
                                },
                                {
                                    offset: 1,
                                    color: '#061E3D'
                                },
                            ],
                        },
                        borderColor: '#215495',
                        borderWidth: 2 * scale,
                    },
                    // 地圖區塊樣式，選中狀態
                    emphasis:
                    {
                        areaColor:
                        {
                            x: 0, y: 0, x2: 0, y2: 1,
                            colorStops:
                            [
                                {
                                    offset: 0,
                                    color: '#084DBC'
                                },
                                {
                                    offset: 1,
                                    color: '#092F5E'
                                },
                            ],
                        },
                    }
                },
            },
        ]
    };
    
    myChart.hideLoading();
    myChart.setOption(option, true);
    myChart.resize();
    
    // 遍歷省內所有地區，分別添加柱狀圖
    echarts.util.each(qinghai.features, function(dataItem, idx)
    {
        // 獲取當前地區數據
        var thisXData = xData[dataItem.properties.name];
        var thisData = rawData[dataItem.properties.name];
        // 根據coordData中當前地區經緯度計算柱狀圖在圖表內的對應坐標
        var coord = myChart.convertToPixel('geo', 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 += ' 項';
                    }
                    
                    return returnStr;
                }
            }
        };
        
        // 生成柱狀圖x軸配置
        tmpOption.xAxis.push(
        {
            id: idx,
            gridId: idx,
            splitLine:
            {
                show: false
            },
            axisTick:
            {
                show: false
            },
            axisLabel:
            {
                show: false
            },
            data: thisXData,
            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: 40 * scale,
            height: 70 * 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:
                {
                    label:
                    {
                        show: true,
                        position: 'insideBottom',
                        textStyle:
                        {
                            color: '#fff',
                            fontSize: 8 * scale
                        },
                        formatter: function(params)
                        {
                            var txtArray = params.name.split('');
                            var rs = '';
                            for(var i = 0; i < txtArray.length; i++)
                            {
                                rs += txtArray[i] + "\n";
                            }
                            
                            return rs;
                        }
                    },
                    color: function(params)
                    {
                        return new echarts.graphic.LinearGradient(
                            0, 0, 0, 1,
                            [
                                {
                                    offset: 0,
                                    color: 'rgba(' + colorList[params.dataIndex] + ', 1)'
                                },
                                {
                                    offset: 1,
                                    color: 'rgba(' + colorList[params.dataIndex] + ', 0.6)'
                                },
                            ], false);
                    }
                }
            }
        });
        
        myChart.setOption(tmpOption);
    });
})