echarts地図と柱図を結合

    
    
    
    
    





    //https://github.com/apache/incubator-echarts/tree/master/map
    //             
    //echarts-4.1.0.js      
    //                
    // http://gallery.echartsjs.com/explore.html#sort=rank~timeframe=all~author=all

    var myChart = echarts.init(document.getElementById('map'),'dark');

    var geoCoordMap = {//            
        "  ": [118.79,32.05],
        "  ": [119.42,32.18],
        "  ": [119.90,31.81],
        "  ": [120.31,31.72],
        "  ": [120.58,31.29],
        "  ": [119.51,32.70],
        "  ": [120.05,32.45],
        "  ": [120.89,32.30],
        "  ": [117.68,34.30],
        "  ": [118.57,33.96],
        "  ": [119.01,33.55],
        "  ": [120.16,33.74],
        "   ": [119.22,34.59],
    };
    var rawData = [
        ["  ",10,20,30],
        ["  ",10,25,30],
        ["  ",10,20,35],
        ["  ",15,20,25],
        ["  ",10,20,30],
        ["  ",10,20,30],
        ["  ",10,25,35],
        ["  ",10,20,30],
        ["  ",15,20,35],
        ["  ",10,25,30],
        ["  ",15,20,35],
        ["  ",10,20,30],
        ["   ",10,25,35],
    ];

    //       
    var option3 = {
        animation: false,
        //       
        tooltip: {
            trigger: 'axis'
        },
        geo: {
            map: '  ',
            // silent: true,
            roam: true,//      
            label: {
                emphasis: {
                    show: false,
                    areaColor: '#eee'
                }
            },
            //       
            itemStyle: {        //        
                normal: {
                    areaColor: 'rgba(119,119,119,0)',
                    borderColor:'#00BBBD',
                    borderWidth:1.5,
                },
                emphasis: {     //        
                    areaColor: 'rgba(119,119,119,0)',
                }
            }
        },
        series: []
    };

    //                
    function renderEachCity() {
        var option = {
            xAxis: [],
            yAxis: [],
            grid: [],
            series: []
        };

        echarts.util.each(rawData, function(dataItem, idx) {
            // console.log(dataItem,idx);      //["  ", 10, 20, 30], 0
            // console.log(dataItem[0]);       //"  "
            var inflationData = [dataItem[1],dataItem[2],dataItem[3]];
            var geoCoord = geoCoordMap[dataItem[0]];//       
            var coord = myChart.convertToPixel('geo', geoCoord);//              。

            idx += '';
            option.xAxis.push({
                id: idx,
                gridId: idx,
                type: 'category',
                name: dataItem[0],
                nameTextStyle: {
                    color: '#F1E04F',
                },
                nameLocation: 'middle',
                nameGap: 3,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                minInterval:10,
                data: ["  ","  ","  "],
                z: 100

            });
            option.yAxis.push({
                id: idx,
                gridId: idx,
                splitLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                axisLine: {
                    show: false,
                    lineStyle: {
                        color: '#1C70B6'
                    }
                },
                max:50,
                z: 100
            });
            option.grid.push({
                id: idx,
                width: 30,
                height: 40,
                left: coord[0] - 15,
                top: coord[1] - 15,
                z: 100
            });
            option.series.push({
                id: idx,
                type: 'bar',
                xAxisId: idx,
                yAxisId: idx,
                barWidth:7,
                barGap: 1,
                barCategoryGap: 0,
                data: inflationData,
                z: 100,
                itemStyle: {
                    normal: {
                        color: function(params){
                            //          
                            var colorList = ['#F75D5D','#59ED4F','#4C91E7'];
                            return colorList[params.dataIndex];
                        }
                    }
                }
            });
        });
        myChart.setOption(option);
    }
    setTimeout(renderEachCity, 0);
    //      
    function throttle(fn, delay, debounce) {
        var currCall;
        var lastCall = 0;
        var lastExec = 0;
        var timer = null;
        var diff;
        var scope;
        var args;

        delay = delay || 0;

        function exec() {
            lastExec = (new Date()).getTime();
            timer = null;
            fn.apply(scope, args || []);
        }

        var cb = function() {
            currCall = (new Date()).getTime();
            scope = this;
            args = arguments;
            diff = currCall - (debounce ? lastCall : lastExec) - delay;

            clearTimeout(timer);

            if (debounce) {
                timer = setTimeout(exec, delay);
            } else {
                if (diff >= 0) {
                    exec();
                } else {
                    timer = setTimeout(exec, -diff);
                }
            }

            lastCall = currCall;
        };
        return cb;
    }
    var throttledRenderEachCity = throttle(renderEachCity,0);
    //      
    myChart.on('geoRoam', throttledRenderEachCity);

    myChart.setOption(option3);

    window.onresize = function () {
        myChart.resize();
        setTimeout(renderEachCity, 0);
    }