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 求daily translation(DT)偏差订正方法的代码
  • ¥15 js调用html页面需要隐藏某个按钮
  • ¥15 ads仿真结果在圆图上是怎么读数的
  • ¥20 Cotex M3的调试和程序执行方式是什么样的?
  • ¥20 java项目连接sqlserver时报ssl相关错误
  • ¥15 一道python难题3
  • ¥15 牛顿斯科特系数表表示
  • ¥15 arduino 步进电机
  • ¥20 程序进入HardFault_Handler
  • ¥15 关于#python#的问题:自动化测试