高德叠加echarts图表方法介绍

前言

地图叠加图表功能虽然是个小众需求，但一直以来都不定时会有人咨询地图能否叠加echarts图表（其他图表使用方式类似），今天就来介绍下在高德地图中怎么叠加图表。

marker方式

图表的创建都依赖于dom，而地图的标号（marker）实现原理也基本都是基于dom，因此在这里我们可以将两者结合起来，通过marker创建图表依赖的dom元素，再将图表渲染到指定div中即可，示例代码如下：

const map = new AMap.Map('map', {
      center: [120,31],
      zoom: 14,
    })
const marker = new AMap.Marker({
  position: [120,31],
  content: `<div id="chart" style="width:300px;height:200px;background:#fff;"></div>`
});
map.add(marker);
const dom = document.getElementById('chart');
const chart = echarts.init(dom);
chart.setOption({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
})

该方式可以将图表叠加到指定位置，并跟随地图移动，基本可以满足绝大部分使用场景。但这也产生一个问题，就是不管地图怎么放大缩小图表大小都不会变化，针对这个需求可以尝试下一种方式。
在线示例：codepen

canvas图层方式

高德地图支持叠加canvas图层，而echarts渲染也存在基于canvas的渲染器，因此可以通过共享canvas实例实现图表叠加，并且由于canvas是同一个实例，当echarts更新数据时，地图上也会同步更新，代码示例如下：

const map = new AMap.Map('map', {
      center: [116.335183, 39.941735],
      zoom: 14,
    })
const canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 200;
const chart = echarts.init(canvas);
chart.setOption({
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: 'line'
    }
  ]
})
const CanvasLayer = new AMap.CanvasLayer({
        canvas: canvas,
        bounds: new AMap.Bounds(
            [116.328911, 39.937229],
            [116.342659, 39.946275]
        ),
        zooms: [3, 18],
    });

map.addLayer(CanvasLayer);

该方式可以实现图表与地图同步缩放，但也会导致图表失真，可以根据具体的业务需求进行选择。
在线示例：codepen