iphone销量echarts 地图配置项内容和展示

纯属虚构

      function randomData() {
    return Math.round(Math.random()*1000);
}

option = {
    title: {
        text: 'iphone销量',
        subtext: '纯属虚构',
        left: 'center'
    },
    tooltip: {
        trigger: 'item'
    },
    visualMap: {
        type:'piecewise',
        min: 0,
        max: 2500,
        splitNumber: 5,
        left: 'left',
        top: 'bottom',
        calculable: true,
        seriesIndex:0
    },
    toolbox: {
        show: true,
        orient: 'vertical',
        left: 'right',
        top: 'center',
        feature: {
            dataView: {readOnly: false},
            restore: {},
            saveAsImage: {}
        }
    },
    geo: {
        map: 'china',
        label: {
            emphasis: {
                show: false
            }
        },
        zoom:1.2,
        containLabel: true
        /*itemStyle: {
            normal: {
                areaColor: '#323c48',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#2a333d'
            }
        }*/
    },
    series: [
        {
            name: 'iphone5',
            type: 'map',
            mapType: 'china',
            zoom:1.2,
            label: {
                normal: {
                    show: true
                },
                emphasis: {
                    show: true
                }
            },
            data:[
                {name: '北京',value: randomData() },
                {name: '天津',value: randomData() },
                {name: '上海',value: randomData() },
                {name: '广东',value: randomData() },
                {name: '台湾',value: randomData() },
                {name: '香港',value: randomData() },
                {name: '澳门',value: randomData() }
            ]
        }
    ]
};
var data = [
    { name: '北京',value:100},
    { name: '天津',value:100}, 
    { name: '河北',value:100}, 
    { name: '山西',value:100}, 
    { name: '内蒙古',value:100}, 
    { name: '辽宁',value:100}, 
    { name: '吉林',value:100}, 
    { name: '黑龙江',value:100}, 
    { name: '上海',value:100}, 
    { name: '江苏',value:100}, 
    { name: '浙江',value:100}, 
    { name: '安徽',value:100},
    { name: '福建',value: 100},
    { name: '江西',value: 100},
    { name: '山东',value: 100},
    { name: '河南',value: 100},
    { name: '湖北',value: 100},
    { name: '湖南',value: 100},
    { name: '广东',value: 100},
    { name: '广西',value: 100},
    //{ name: '海南',value: 100},
    { name: '重庆',value: 100},
    { name: '四川',value: 100},
    { name: '贵州',value: 100},
    { name: '云南',value: 100},
    { name: '西藏',value: 100},
    { name: '陕西',value: 100},
    { name: '甘肃',value: 100},
    { name: '青海',value: 100},
    { name: '宁夏',value: 100},
    { name: '新疆',value: 100}, 
    { name: '新疆兵团',value: 100}
];
var geoCoordMap = {
    '北京': [116.4551, 40.2539],
    '天津': [117.4219, 39.4189],
    '河北': [114.4995, 38.1006],
    '山西': [112.3352, 37.9413],
    '内蒙古': [111.4124, 40.4901],
    '辽宁': [123.1238, 42.1216],
    '吉林': [125.8154, 44.2584],
    '黑龙江': [127.9688, 45.368],
    '上海': [121.4648, 31.2891],
    '江苏': [118.8062, 31.9208],
    '浙江': [119.5313, 29.8773],
    '安徽': [117.29, 32.0581],
    '福建': [119.4543, 25.9222],
    '江西': [116.0046, 28.6633],
    '山东': [117.1582, 36.8701],
    '河南': [113.4668, 34.6234],
    '湖北': [114.3896, 30.6628],
    '湖南': [113.0823, 28.2568],
    '广东': [113.5107, 23.2196],
    '广西': [108.479, 23.1152],
    '海南': [110.35,20.02],
    '重庆': [107.7539, 30.1904],
    '四川': [103.9526, 30.7617],
    '贵州': [106.6992, 26.7682],
    '云南': [102.9199, 25.4663],
    '西藏': [91.1865, 30.1465],
    '陕西': [109.1162, 34.2004],
    '甘肃': [103.5901, 36.3043],
    '青海': [101.4038, 36.8207],
    '宁夏': [106.3586, 38.1775],
    '新疆': [87.9236, 43.5883],
    '新疆兵团': [85.42, 41.82]
};

setTimeout(function () {
    for (var i = 0; i < data.length; i++) {
        var pointInGeo = geoCoordMap[data[i].name];
        var pointInPixel = myChart.convertToPixel('geo', pointInGeo);
        var b = myChart.containPixel({geoIndex: 0}, pointInPixel);
        
        //console.log(myChart.containPixel({geoIndex: 0}, [635, 615]));
        //console.log(data[i].name);
        //console.log(b);
        //console.log(pointInPixel);
        if (b) {
            myChart.setOption({
                grid: [
                    {
                        id:'grid'+i,
                        top: pointInPixel[1]-20,
                        width: 40,
                        height: 40,
                        left: pointInPixel[0]-30,
                        containLabel: true
                    }
                ],
                xAxis: [
                    {
                        id:'xAxis'+i,
                        gridIndex: i,
                        type: 'category',
                        show: false,
                        data: ['1'+i, '2'+i, '3'+i, '4'+i, '5'+i]
                    }
                ],
                yAxis: [
                    {
                        id:'yAxis'+i,
                        gridIndex: i,
                        type: 'value',
                        show: false
                    }
                ],
                series: [{
                    id:i,
                    name:'直接访问',
                    type:'bar',
                    barGap: 0,
                    barCategoryGap: 0,
                    z:3,
                    xAxisIndex: i,
                    yAxisIndex: i,
                    data:[0.1, 0.52, 2, 3.34,3.55]
                }]
            });
        }
    }
}, 0);