echarts绘制世界地图,中国地图在中间

本文介绍了如何使用echarts库在网页中绘制世界地图,并将中国地图置于中央位置。通过引入worldZH.js和echarts.js文件,设置地图坐标数据worldGeoCoordMap和对应的值worldDatas,展示不同地区的数据分布。示例中,多个城市的值被设定为0.5或1,用于数据可视化展示。
摘要由CSDN通过智能技术生成

首先引入:worldZH.js,echarts.js
地图js下载地址绿色的飞机传送数据,详情看代码

var myChart = echarts.init(document.getElementById(‘main’));
var worldGeoCoordMap = {
‘蒙特里’: [1.874729,33.541478 ],
‘荷兰奥特芬’: [20,52.735095 ],
‘深圳’: [111.4648, 23.2891],
“Tokyo”: [71.691706, 23.689487],
“Toronto”: [239.383184, 43.653226],
“Vilnius”: [115.279651, 64.687156],
“Australian”:[125,-20]
};
var worldDatas = [
[{
name: ‘蒙特里’,
value: 0.5
}], [{
name: “荷兰奥特芬”,
value: 0.5
}],
[{
name: ‘深圳’,
value: 0.5
}],
[{
name: ‘Tokyo’,
value: 0
}],[{
name: ‘Toronto’,
value: 0.5
}],
[{
name: ‘Vilnius’,
value: 1
}],
[{
name: ‘Australian’,
value: 0.5
}]
];

    var convertData = function(data) {
        var res = [];
        for(var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = worldGeoCoordMap[dataItem[0].name];
            var toCoord = [111.4648, 23.2891];
            if(fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [['深圳前海
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值