当前位置:   article > 正文

Echarts加载地图的三种方式_echarts 加载卫星地图

echarts 加载卫星地图

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

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

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

JavaScript 引入示例:

  1. <script src="echarts.js"></script>
  2. <script src="map/js/china.js"></script>
  3. <script>
  4. var chart = echarts.init(document.getElementById('main'));
  5. chart.setOption({
  6. series: [{
  7. type: 'map',
  8. map: 'china'
  9. }]
  10. });
  11. </script>

JSON 引入示例:

  1. $.get('map/json/china.json', function (chinaJson) {
  2. echarts.registerMap('china', chinaJson);
  3. var chart = echarts.init(document.getElementById('main'));
  4. chart.setOption({
  5. series: [{
  6. type: 'map',
  7. map: 'china'
  8. }]
  9. });
  10. });

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

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

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/110050
推荐阅读