weixin_40187983
2018-05-21 22:04
采纳率: 73.6%
浏览 6.3k
已采纳

Echart 如何在现有的地图上,加点(利用地理座标)

各位早安

我以Echart做了中国地图,目前功能是可以显示各省的总销量

我想实现,比如某一省,在某个坐标(经伟度)上的店舖的所在地
一般会设所有的位置
geoCoordMap = {"北京库":[116.53,40.16],"成都库":[103.95,30.56],……

某一店舖的值
var data = [{name:"北京库",value:199900},{name:"成都库DC",value:133693}……

我希望在不改变这张图的基础上(维持现在的色及格式),加入上面的讯息。
用圆圈之类的 , 请问我js的语法要怎么写呢
无论值大小,圆圈大小一样就可以了
图片说明
图片说明
附上图二,中国地图的语法
<!DOCTYPE html>




ECharts




#china-map {width:1000px; height: 700px;margin: auto;}

    <div id="china-map"></div>

    <script>
        var myChart = echarts.init(document.getElementById('china-map'));
     function randomData() {
return Math.round(Math.random()*1000);

}

option = {
title: {
text: '省份销量额',
subtext: '-',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left',
data:['销售额']
},
visualMap: {
min: 0,
max: 1000000,
left: 'left',
top: 'bottom',
text: ['高','低'], // 文本,默认为数值文本
calculable: true
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [

    {
        name: 'iphone5',
        type: 'map',
        mapType: 'china',
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },
        data:[{name:"广东",value:426661},{name:"江苏",value:230421},{name:"浙江",value:220367},{name:"北京",value:202471},{name:"上海",value:163766},{name:"四川",value:163676},{name:"山东",value:148341},{name:"河南",value:120000},{name:"湖北",value:114175},{name:"福建",value:101498},{name:"辽宁",value:95904},{name:"湖南",value:93790},{name:"河北",value:91469},{name:"重庆",value:89959},{name:"安徽",value:80801},{name:"陕西",value:78940},{name:"云南",value:63423},{name:"广西",value:62782},{name:"黑龙江",value:58703},{name:"江西",value:58093},{name:"天津",value:56108},{name:"吉林",value:50502},{name:"贵州",value:47750},{name:"山西",value:46641},{name:"新疆",value:44705},{name:"内蒙古",value:41472},{name:"甘肃",value:28612},{name:"海南",value:24648},{name:"宁夏",value:13047},{name:"青海",value:9576},{name:"西藏",value:5352},{name:"香港",value:467},{name:"台湾",value:139} ]
    }
]

};

        myChart.setOption(option);
        myChart.on('mouseover', function (params) {
            var dataIndex = params.dataIndex;
            console.log(params);
        });
    </script>

</body>

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • sh601431194 2018-05-22 03:06
    已采纳

    var geoCoordMap = {
    "XXXX":[119.16,33.95],
    "YYYY":[119.50,32.08],
    };

    var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
    res.push({
    'name': data[i].name,
    'value': geoCoord.concat(data[i].value).concat(data[i].add)
    });
    }
    }
    return res;
    };
    在series中加入
    {
    name: '植物种质库',
    type: 'scatter',
    coordinateSystem: 'geo',
    data: convertData([
    {name:"XXXX",value:3,add:3213},
    {name:"YYYY",value:3,add:3213}
    ]),
    symbolSize: 4,
    itemStyle : {

                    normal : {
                        color:'#27EA16',
                        borderColor : '#27EA16',
                        borderWidth : 1.5,
                    },
    
                }
    
        }
    
    点赞 打赏 评论
  • sh601431194 2018-05-22 08:58

    $.get('common/echart/jiangsu.json', function(jcJson) {
    echarts.registerMap('江苏', jcJson);
    var myChart = echarts.init(document.getElementById('jiangsu'));
    /* myChart.showLoading({
    text:'正在加载'
    }); */
    var geoCoordMap = {

    //植物
    "紫菜种质资源库":[119.16,33.95], 
     "药用植物种质资源圃":[119.50,32.08], 
    "球根花卉种质资源库":[118.16,34.22],
    "枇杷、杨梅种质资源圃":[119.23,34.28], 
    "板栗种质资源圃":[119.48,31.43], 
    "银杏种质资源圃":[119.56,31.74], 
    "杨树种质资源圃":[121.26,32.30],
    "农业种质资源中期库":[118.665821,31.875428],
    "果树种质圃":[119.94,32.76],
     "柳树种质资源圃":[118.44,33.64],
     "茶树种质资源圃":[120.95,31.39],
     "草坪草种质资源库":[120.63,31.16],
    

    "道地中药资源标准物质及指纹图谱库":[119.87,33.74],
    //动物
    "罗氏沼虾种质资源库":[118.43,32.95],
    "优质特色家蚕种质资源库":[119.76,32.08],
    "苏钟猪保种场":[116.85,34.56],
    "山区水牛保种场":[118.53,34.36],
    "河豚鱼种质资源库":[119.86,31.43],
    "重要经济鱼类低温种质库":[119.56,32.44],
    "翘嘴红鲌种质资源库":[121.70,31.80],
    "龟鳖种质资源库":[118.96,31.36],
    "斑点叉尾鮰种质资源库":[120.12,33.88],
    "海水养殖甲壳类种质资源库":[118.90,34.51],
    };

    var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
    var geoCoord = geoCoordMap[data[i].name];
    if (geoCoord) {
    res.push({
    'name': data[i].name,
    'value': geoCoord.concat(data[i].value).concat(data[i].add)
    });
    }
    }
    return res;
    };

    option = {

     title: {
        text: '库圃分布',
        x:'80%',
        y:'15%',
        textStyle: {
           color: '#14c8d4',
            fontSize:'16'
        }
    }, 
    
    color : [ 'rgba(255, 255, 255, 0.8)', 'rgba(14, 241, 242, 0.8)',
                    'rgba(37, 140, 249, 0.8)' ],
     tooltip: {
        /*trigger: 'item',
         formatter: function (params) {
            return params.data.name + ' :<br/> ' +'库圃数量:'+ params.value+'<br/>保存种质数:'+params.data.cp+'<br/>新增种质数:'+params.data.add;
        } 
         formatter:'库圃数量:{c}<br/>+{c1}' */
    }, 
    legend: {
        orient: 'vertical',
        y: '75%',
        x:'8%',
        itemWidth:10,
        itemHeight:6,
        data:['市级','植物种质库','动物种质库'],
        textStyle: {
            color: '#fff'
        }
    },
    /* visualMap: {
        min: 0,
        max: 5,
        calculable: true,
        inRange: {
            color: ['#50a3ba', '#eac736', '#d94e5d']
        },
        textStyle: {
            color: '#fff'
        }
    }, */
    geo: {
        map: '江苏',
        top:'13.8%',
        left:'13%',
        label: {
            emphasis: {
                show: false
            }
        },
        itemStyle: {
            normal: {
                areaColor: '#256081',
                borderColor: '#111'
            },
            emphasis: {
                areaColor: '#323c48'
            } 
        }
    },
     series: [
        {
            name: '市级',
            type: 'map',
            map:"江苏",
            top:'12%',
            /* coordinateSystem: 'geo', */
    
            data : [{name: '南通市', value:2,cp:13433,add:3213},
                    {name: '淮安市', value: '5',cp:13433,add:3213},
                    {name: '宿迁市', value: '2',cp:13433,add:3213},
                    {name: '徐州市', value: '3',cp:13433,add:3213},
                    {name: '连云港市', value: '2',cp:13433,add:3213},
                    {name: '盐城市', value: '5',cp:13433,add:3213},
                    {name: '泰州市', value: '7',cp:13433,add:3213},
                    {name: '扬州市', value: '1',cp:13433,add:3213},
                    {name: '镇江市', value: '4',cp:13433,add:3213},
                    {name: '常州市', value: '2',cp:13433,add:3213},
                    {name: '无锡市', value: '2',cp:13433,add:3213},
                    {name: '南京市', value: '1',cp:13433,add:3213},
                    {name: '苏州市', value: '3',cp:13433,add:3213}     
                    ],
            symbolSize: 18,
             tooltip: {
        trigger: 'item',
         formatter: function (params) {
            return params.data.name + ' :<br/> ' +'库圃数量:'+ params.value+'<br/>保存种质数:'+params.data.cp+'<br/>新增种质数:'+params.data.add;
        } 
    
    }, 
           itemStyle : {
                    normal : {
                        borderColor : '#72bfea',
                        borderWidth : 2,
                        areaColor : "#0f1b3e",//区域颜色
                        color:'#58c8fc'
                    },
                    emphasis : {
                        areaColor : "#377498",//区域颜色
                    }
                },
                label : {
                    normal : {
                        formatter : '{b}',
                        position : 'right',
                        show : true,
                        color : '#fff',
                    },
                    emphasis : {
                        color : '#eca803',
                    }
                } 
                },
                {
            name: '植物种质库',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData([
                    {name:"紫菜种质资源库",value:3,add:3213},
                    {name:"药用植物种质资源圃",value:3,add:3213},
                    {name:"球根花卉种质资源库",value:3,add:3213},
                    {name:"枇杷、杨梅种质资源圃",value:1230,add:3213},
                    {name:"板栗种质资源圃",value:1123,add:3213},
                    {name:"银杏种质资源圃",value:213123,add:3213},
                    {name:"杨树种质资源圃",value:3123,add:3213},
                    {name:"农业种质资源中期库",value:3213,add:3213},
                    {name:"果树种质圃",value:3,add:3213},
                    {name:"柳树种质资源圃",value:3123,add:3213},
                    {name:"茶树种质资源圃",value:1232,add:3213},
                    {name:"草坪草种质资源库",value:3321,add:3213},
                    {name:"道地中药资源标准物质及指纹图谱库",value:1232,add:3213}
            ]),
            symbolSize: 4,
             tooltip: {
        trigger: 'item',
         formatter: function (params) {
            return params.data.name +  '('+params.value[0]+','+params.value[1]+')<br/>保存种质数:'+params.value[2]+'<br/>新增种质数:'+params.value[3];
        } 
    }, 
           itemStyle : {
    
                    normal : {
                        color:'#27EA16',
                        borderColor : '#27EA16',
                        borderWidth : 1.5,
                    },
    
                },
    
        },{
            name: '动物种质库',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: convertData([
                    {name:"罗氏沼虾种质资源库",value:3,add:3213},
                    {name:"优质特色家蚕种质资源库",value:3,add:3213},
                    {name:"苏钟猪保种场",value:3,add:3213},
                    {name:"山区水牛保种场",value:1230,add:3213},
                    {name:"河豚鱼种质资源库",value:1123,add:3213},
                    {name:"重要经济鱼类低温种质库",value:213123,add:3213},
                    {name:"翘嘴红鲌种质资源库",value:3123,add:3213},
                    {name:"龟鳖种质资源库",value:3213,add:3213},
                    {name:"斑点叉尾鮰种质资源库",value:3,add:3213},
                    {name:"海水养殖甲壳类种质资源库",value:3123,add:3213}
            ]),
            symbolSize: 4,
             tooltip: {
        trigger: 'item',
         formatter: function (params) {
            return params.data.name +  '('+params.value[0]+','+params.value[1]+')<br/>保存种质数:'+params.value[2]+'<br/>新增种质数:'+params.value[3];
        } 
    }, 
           itemStyle : {
                    normal : {
                        color:'#E2A322',
                        borderColor : '#E2A322',
                        borderWidth : 1.5,
                    },
    
                },
    
        },
    ]
    

    }
    myChart.setOption(option);
    })

    点赞 打赏 评论