Echarts加载地图的三种方式

参考地址:http://www.echartsjs.com/option.html#geo.map

ECharts 中提供了两种格式的地图数据,一种是可以直接 script 标签引入的 js 文件,引入后会自动注册地图名字和数据。还有一种是 JSON 文件,需要通过 AJAX 异步加载后手动注册。

下面是两种类型的使用示例:

JavaScript 引入示例:

<script src="echarts.js"></script>
<script src="map/js/china.js"></script>
<script>
var chart = echarts.init(document.getElementById('main'));
chart.setOption({
    series: [{
        type: 'map',
        map: 'china'
    }]
});
</script>

JSON 引入示例:

$.get('map/json/china.json', function (chinaJson) {
    echarts.registerMap('china', chinaJson);
    var chart = echarts.init(document.getElementById('main'));
    chart.setOption({
        series: [{
            type: 'map',
            map: 'china'
        }]
    });
});

ECharts 使用 geoJSON 格式的数据作为地图的轮廓。

另外,其实是有第三种方式的,Echarts还可以加载百度地图,参考示例:http://gallery.echartsjs.com/editor.html?c=effectScatter-bmap

http://www.echartsjs.com/faq.html#baidu-map

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用以下代码来使用echarts地图: ```html <html> <head> <meta charset="utf-8"> <title>使用echarts地图</title> <script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0/echarts.min.js"></script> <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> <script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"></script> <style> #main { width: 100%; height: 600px; } </style> </head> <body> <div id="main"></div> <script> var myChart = echarts.init(document.getElementById('main')); // 使用天地图作为底图 var tdtLayer = new ol.layer.Tile({ preload: Infinity, source: new ol.source.XYZ({ url: 'http://t0.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=您的密钥' }) }); var baseMapLayer = new ol.layer.Group({ layers: [tdtLayer] }); var map = new ol.Map({ target: 'main', layers: [baseMapLayer], view: new ol.View({ projection: 'EPSG:4326', center: [104.07, 30.67], zoom: 12 }) }); echarts.util.mapData.params.params['成都'] = { getGeoJson: function (callback) { $.getJSON('../geoJson/chengdu.json', callback); } }; var convertedData = []; //向地图人口密度 $.get('../data/population.json', function (data) { echarts.registerMap('成都', data); data.features.forEach(function (feature) { convertedData.push({ name: feature.properties.name, value: Math.random() * 10000 }); }); myChart.setOption(option = { tooltip: { trigger: 'item' }, visualMap: { min: 0, max: 10000, left: 'left', top: 'bottom', text: ['High', 'Low'], seriesIndex: [1], inRange: { color: ['#e0ffff', '#006edd'] }, calculable: true }, geo: { map: '成都', roam: true, label: { normal: { show: true, textStyle: { color: 'rgba(0,0,0,0.4)' } } }, itemStyle: { normal: { borderColor: 'rgba(0, 0, 0, 0.2)' } } }, series: [ { name: 'Top 5', type: 'effectScatter', coordinateSystem: 'geo', data: convertedData.sort(function (a, b) { return b.value - a.value; }).slice(0, 5), symbolSize: function (val) { return val[2] / 10; }, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: 'purple', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 }, { name: 'Area Name', type: 'map', geoIndex: 0, data: convertedData } ] }); }); </script> </body> </html> ``` 其中,需要把`您的密钥`替换成您的天地图和百度地图的密钥。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值