vue 中使用 echarts 百度地图

在 Vue 中使用 echarts 百度地图需要先引入 echarts 和百度地图的 JavaScript API。

1. 引入 echarts

在 Vue 中可以通过 npm 安装 echarts，然后在需要使用的组件中引入：

npm install echarts --save

import echarts from 'echarts'

2. 引入百度地图 JavaScript API

在 Vue 中可以在 index.html 中引入百度地图 JavaScript API：

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=百度地图密钥"></script>

注意：需要替换 ak 参数为你的百度地图密钥。

3. 在组件中使用 echarts 百度地图

在 Vue 中可以通过在组件的 mounted 钩子函数中初始化 echarts 实例和百度地图实例，并将百度地图实例作为参数传递给 echarts 的 setOption 方法。

<template>
  <div id="chart"></div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    // 初始化 echarts 实例
    const chart = echarts.init(document.getElementById('chart'))

    // 初始化百度地图实例
    const bmap = new BMap.Map("chart");
    bmap.centerAndZoom(new BMap.Point(116.404, 39.915), 11);
    bmap.addControl(new BMap.NavigationControl());

    // echarts 百度地图 option 配置
    const option = {
      bmap: {
        center: [116.404, 39.915],
        zoom: 11,
        roam: true,
      },
      series: [{
        type: 'scatter',
        coordinateSystem: 'bmap',
        data: [[116.404, 39.915]],
        symbolSize: 20,
      }]
    }

    // 将百度地图实例传递给 echarts 的 setOption 方法
    chart.setOption(option, true, { bmap: bmap });
  }
}
</script>

上面的代码中，使用了一个 scatter 类型的系列，它的 coordinateSystem 设置为 bmap，这样就可以在百度地图上绘制散点图了。

注意：需要在组件销毁时调用 echarts 的 dispose 方法销毁实例，以避免内存泄漏。

export default {
  mounted() {
    const chart = echarts.init(document.getElementById('chart'))
    // ...
  },
  beforeDestroy() {
    echarts.dispose(document.getElementById('chart'))
  }
}