echarts 展示中国地图的方法

   1调用echarts.min.js

   2 调用中国地图 china.js

   3 初始化

   4调用方法

          var _map = echarts.init(document.getElementById('map'), 'macarons');

 

            function getAreaMap(d,zoom) {

zoom = zoom || 1.2;

var pdata = {

    '上海': [121.4648, 31.2891],

'北京': [112.5977, 44.3408],

'内蒙古': [117.5977, 44.3408],

'黑龙江': [128.1445, 48.5156],

'吉林': [126.4746, 43.5938],

'湖南': [111.5332, 27.3779],

'河北': [115.4004, 37.9688],

'辽宁': [122.3438, 41.0889],

'湖北': [112.2363, 31.1572],

'天津': [117.4219, 39.4189],

'山西': [112.4121, 37.6611],

'山东': [118.7402, 36.4307],

'江苏': [120.0586, 32.915],

'浙江': [120.498, 29.0918],

'安徽': [117.2461, 32.0361],

'河南': [113.4668, 33.8818],

'甘肃': [95.7129, 40.166],

'宁夏': [105.9961, 37.3096],

'陕西': [109.5996, 35.6396],

'福建': [118.3008, 25.9277],

'江西': [116.0156, 27.29],

'广东': [113.4668, 22.8076],

'广西': [108.2813, 23.6426],

'贵州': [106.6113, 26.9385],

'重庆': [107.7539, 30.1904],

'四川': [102.9199, 30.1904],

'云南': [101.8652, 25.1807],

'青海': [96.2402, 35.4199],

'西藏': [88.7695, 31.6846],

'新疆': [84.9023, 41.748],

'香港': [114.2578, 22.3242],

'澳门': [113.5547, 22.1484],

'海南': [109.9512, 19.2041],

'台湾': [121.0254, 23.5986],

'中国': [121.0254, 23.5986]

};

var def = [];

for (var i in pdata)

{

var v=d.data.filter(function (e){ return e.name==i;});

if(v.length>0){

def.push({name:i,value:v[0].value});

}else

def.push({name:i,value:0});

}

return option = {

tooltip: {

trigger: 'item'

},

visualMap: {

    show:false,//隐藏颜色条

min: 0,

max: d.max*1.2,

left: 'left',

top: 'bottom',

text: ['高', '低'], // 文本，默认为数值文本

textStyle:{color:'#fff'},

inRange:{

color: ['#87CEFA', '#FFD700', '#FFA500', '#FF6347']

},

calculable: true

},

series: [

{

name: d.name,

type: 'map',

mapType: 'china',

roam: false,

center: d.center || [107.97, 35.71],

zoom: zoom,

 

itemStyle: {

normal: {

color: 'rgba(37, 43, 61, .7)',

borderColor: 'rgba(100,149,237,1)'

},

emphasis: {

color: 'rgba(33,75,141,.7)'

}

},

label: {

normal: {

    //去掉文字

show: false,

textStyle:{color:'#000'}

},

emphasis: {

show: true

}

},

data: def

}

]

};

}

 

 

动态调用后台返回数据

ajaxData('api/tourist/listProvince', {

                'beginDate': s,

　　　　'endDate': e

            }, function(d) {

                var d=d.data;

                var data = [];

                var max = 0;

                var str = "";

                for (var i = 0; i < d.length; i++) {

                    max = d[i].num > max ? d[i].num : max;

                   data.push({ "value": d[i].num, "name": d[i].name.MapNmae() });

                 }

                 _map.setOption(getAreaMap({ data: data, max: max ,name:''}))

           });