weixin_40187983 2018-05-21 22:04 采纳率: 100%
浏览 6902
已采纳

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,
                    },
    
                }
    
        }
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面,并且报了如下错误,尝试过换显卡驱动,但是好像不行
  • ¥15 没有证书,nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)(相关搜索:51单片机|单片机|测试代码)
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了,如何解决?(操作系统-ubuntu)