echarts地图展示接口返回的数值

你可以使用 echarts 中的 series-map 组件来展示地图数据，并将接口返回的数值作为数据源。具体步骤如下：

1. 在 echarts 中引入 series-map 组件：

import echarts from 'echarts/lib/echarts';
import 'echarts/lib/chart/map';

2. 在页面中定义一个 div 元素，作为 echarts 的容器：

<div id="map-container" style="width: 100%; height: 600px;"></div>

3. 初始化 echarts，并设置地图的配置项：

const myChart = echarts.init(document.getElementById('map-container'));
myChart.setOption({
  tooltip: {
    formatter: '{b}: {c}'
  },
  visualMap: {
    min: 0,
    max: 1000,
    left: 'left',
    top: 'bottom',
    text: ['High', 'Low'],
    calculable: true
  },
  series: [{
    type: 'map',
    mapType: 'world',
    roam: true,
    data: [{
      name: 'China',
      value: 1000
    }, {
      name: 'United States',
      value: 500
    }]
  }]
});

上述代码中的 data 属性就是你从接口获取到的数据，其中 name 表示国家名称，value 表示该国家对应的数值。这里只是示例数据，你需要根据实际情况进行修改。

4. 在接口返回数据后，更新 echarts 数据源：

const responseData = {
  "China": 800,
  "United States": 600,
  "Japan": 300
};

const data = Object.keys(responseData).map((name) => ({
  name,
  value: responseData[name]
}));

myChart.setOption({
  series: [{
    data
  }]
});

这里将接口返回的数据转换成 echarts 能够识别的数据格式，并更新 series 配置项中的 data 属性。这样就能够动态展示地图数据了。