vue使用echarts地图json api怎么用

使用 ECharts 地图需要加载对应的 GeoJSON 数据，并引入 ECharts 的 Map 相关组件。

以下是一些基本的步骤：

1. 引入 ECharts 及其依赖

<script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>

2. 引入地图 GeoJSON 数据

ECharts 官方提供了大量的地图数据，可以在官网下载，也可以通过 npm 安装。这里以中国地图为例，假设已经下载或安装了该地图数据。

// 引入中国地图 GeoJSON 数据
import chinaGeoJSON from 'echarts/map/json/china.json';

3. 初始化 ECharts 实例

// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('myMap'));

4. 配置 ECharts

// 配置 ECharts
myChart.setOption({
  series: [
    {
      name: '中国',
      type: 'map',
      map: 'china',
      data: [
        { name: '北京', value: 100 },
        { name: '上海', value: 200 },
        { name: '广州', value: 300 },
        // ...
      ],
    },
  ],
});

其中，`map` 属性指定地图类型，`data` 属性指定数据，可以通过 `name` 属性指定地图区域的名称，通过 `value` 属性指定该区域的值。

5. 渲染地图

// 渲染地图
myChart.setOption({
  series: [
    {
      name: '中国',
      type: 'map',
      map: 'china',
      data: [
        { name: '北京', value: 100 },
        { name: '上海', value: 200 },
        { name: '广州', value: 300 },
        // ...
      ],
    },
  ],
});

以上是使用 ECharts 地图的基本步骤，具体的配置和使用方式可以参考 ECharts 官方文档。