ECharts · Example

// 自定义扩展图表类型：mapType = continent 大洲地图
require('echarts/util/mapData/params').params.continent = {
    getGeoJson: function (callback) {
        $.getJSON('geoJson/continent_geo.json',callback);
    }
}
option = {
  
    tooltip : {
        trigger: 'item',
        formatter: function (params){
            var value = params.value ;
            return params.seriesName  + params.name + '  ' ;
            
        }
    },
  
    dataRange: {
        min: 0,
        max: 1000,
        
        splitNumber:0,
        color: ['orangered','skyblue','yellow','lightskyblue'],
        show:false,
    },
   
    series : [
        {
            name: '',//禹治营销网络
            type: 'map',
            mapType: 'continent', // 自定义扩展图表类型
            roam:true,
              
            itemStyle:{
                normal:{
                label:{show:true},
                    borderWidth:1,
                    borderColor:'#fff',
                    color: 'blue'
                    },
              emphasis: {                 // 也是选中样式
                    borderWidth:2,
                    borderColor:'#fff',
                    color: '#3674c8',
                    label: {
                        show: true,
                        textStyle: {
                            color: '#fff'
                        }
                    }
                }
            },
            
            data:[
              {name: '亚洲', 
              value: 8967.69,
                    itemStyle: {
                        normal: {
                            color: '#fff',
                            label: {
                                show: true,
                                textStyle: {
                                    color: '#fff',
                                    fontSize: 15
                                }
                            }
                        }},
              emphasis: {                  
                            borderWidth:5,
                            borderColor:'blue',
                            color: 'blue',
                            label: {
                                show: false,
                                textStyle: {
                                    color: 'blue'
                                }
                            }
                        }},
            {name: '大洋洲', value: 592.09},
            {name: '欧洲', value: 183.62},
            {name: '北美洲', value: 41.63},
            {name: '南美洲', value: 10.41},
            {name: '非洲', value: 22.5837}
            ],
           markPoint : {
                
                symbol:'emptyCircle',
                symbolSize : function (v){
                    return 10 + v/10
                },
                
                effect : {
                    show: true,
                    shadowBlur : 1
                },
                itemStyle:{
                    normal:{
                        label:{show:true},      
                        borderColor:'rgba(30,144,255,0.5)'
                        },
                    emphasis: {
                        label:{position:'top'}
                    }
                    
                },
                data : [
                {name:'亚洲' , geoCoord:[120, 30]}, 
               {name:'亚洲' , geoCoord:[90, 40]}, 
                {name:'南美洲', geoCoord:[-60, -21]},
                {name:'非洲', geoCoord:[20, 8]},
                  {name:'亚洲1', geoCoord:[128, 70]},
                     {name:'亚洲2', geoCoord:[15, 60]},
                       {name:'亚洲3', geoCoord:[90, 40]},
                         {name:'欧洲', geoCoord:[90, 70]},
                    {name:'北美洲1', geoCoord:[-85, 80]},
                     {name:'北美洲2', geoCoord:[-70, 50]},
                    {name:'北美洲3', geoCoord:[-145, 65]},
                    {name:'非洲1', geoCoord:[20, 8]},
                    {name:'非洲2', geoCoord:[48, -20]}, 
                    {name:'大洋洲1', geoCoord:[115, 0]}
                    , {name:'大洋洲2', geoCoord:[145, -5]},
                
                  {name:'北美洲', geoCoord:[-100, 35]},
                {name:'大洋洲', geoCoord:[120, -30]}
                ]
            },
            markLine : {
                smooth:true,
                effect : {
                    show: true,
                    scaleSize: 2,
                    period: 20,
                    color: '#fff',
                    shadowBlur: 10
                },
                itemStyle : {
                    normal: {
                        borderWidth:1,
                        lineStyle: {
                            type: 'solid',
                            shadowBlur: 6,
                            color:'#999'
                        }
                        
                    }
                },
                
                data : [
                
                    [
                     {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'南美洲', geoCoord:[-60, -21]}
                    ],
                      [
                     {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'亚洲', geoCoord:[90, 40]}
                    ],
                     [
                     {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'亚洲1', geoCoord:[128, 70]}
                    ],
                      [
                     {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'亚洲2', geoCoord:[15, 60]}
                    ],
                      [
                     {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'亚洲3', geoCoord:[90, 40]}
                    ],
                    [
                         {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'北美洲', geoCoord:[-100, 20]}
                    ],
                    [
                         {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'北美洲1', geoCoord:[-85, 80]}
                    ],
                     [
                         {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'北美洲2', geoCoord:[-70, 50]}
                    ],
                    [
                         {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'北美洲3', geoCoord:[-145, 65]}
                    ],
                    [
                        {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'非洲', geoCoord:[25, -25]}
                    ] 
                    ,
                     [
                        {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'非洲1', geoCoord:[20, 8]}
                    ] 
                    ,[
                        {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'非洲2', geoCoord:[48, -20]}
                    ] 
                    ,
                    [
                        {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'欧洲', geoCoord:[90, 70]}
                    ] 
                    ,
                    [
                        {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'大洋洲', geoCoord:[120, -30]}
                    ] 
                     ,
                    [
                        {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'大洋洲1', geoCoord:[115, 0]}
                    ] 
                     ,
                    [
                        {name:'亚洲' , geoCoord:[120, 30]}, 
                        {name:'大洋洲2', geoCoord:[145, -5]}
                    ] 
                ]
            },
            // 文本位置修正
            textFixed : {
                '大洋洲' : [350, 0],
                '非洲' : [10, -30],
                '北美洲' : [20, 0],
                '南美洲' : [0, -10],
                '亚洲' : [20, -30],
                '欧洲' : [240, -10],
            }
        }
    ]
};