图表5 地图

Qwe7

发布于 2022-06-16 11:42:56

50100

代码可运行

文章被收录于专栏：网络收集网络收集

运行总次数：0

代码可运行

5、图表5 地图

1.地图图表的使用方式

百度地图API : 使用百度地图的 api , 它能够在线联网展示地图, 百度地图需要申请 ak

矢量地图 : 可以离线展示地图, 需要开发者准备矢量地图数据

接下来的实现是通过矢量图的方式来实现的

2.矢量地图的实现步骤

步骤1 ECharts 最基本的代码结构

<!DOCTYPE html>
  <html lang="en">

  <head>
    <script src="js/echarts.min.js"></script>
  </head>

  <body>
    <div style="width: 600px;height:400px"></div>
    <script>
      var mCharts = echarts.init(document.querySelector("div")) var option = {}
      mCharts.setOption(option)
    </script>
  </body>

</html>

此时 option 是一个空空如也的对象

步骤2 准备中国的矢量 json 文件, 放到 json/map/ 目录之下

步骤3 使用 Ajax 获取 china.json

$.get('json/map/china.json', function (chinaJson) {})

步骤4 在Ajax的回调函数中, 往 echarts 全局对象注册地图的 json 数据

echarts.registerMap('chinaMap', chinaJson)

$.get('json/map/china.json', function (chinaJson) {
  echarts.registerMap('chinaMap', chinaJson)
})

步骤5 获取完数据之后, 需要配置 geo 节点, 再次的 setOption

type : ‘map’

map : ‘chinaMap’

var mCharts = echarts.init(document.querySelector("div")) $.get('json/map/china.json', function (chinaJson) {
  echarts.registerMap('chinaMap', chinaJson) 
  var option = {
    geo: {
      type: 'map', // map是一个固定的值 
      map: 'chinaMap', //chinaMap需要和registerMap中的第一个参数保持一致 
    }
  };
  mCharts.setOption(option)
})

（地图不给放，大家自行尝试）

注意: 需要注意的是, 由于在代码中使用了 Ajax , 所以, 关于此文件的打开, 不能以 file 的协议打开, 应该将其置于 HTTP 的服务之下方可正常展示地图

本文系转载，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

ajax