Echarts 在地图上绘制柱状图

首先需要获取地图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>