echarts调用地图的json时同时调接口获取展示在地图上的数值
时间: 2024-05-12 12:15:30 浏览: 107
可以通过以下步骤实现:
1. 加载地图的JSON文件,可以使用ECharts提供的`geoJson`属性。
2. 注册一个异步数据加载函数,用于加载展示在地图上的数值。可以使用`series`中的`data`属性,将数据与地图区域对应。
3. 在异步数据加载函数中,通过接口获取需要展示在地图上的数值,并将数据格式化成ECharts支持的格式。
4. 将数据与地图区域对应,即可在地图上展示数值。
以下是一个简单的示例代码:
```javascript
// 加载地图JSON文件
echarts.registerMap('mapName', mapJson);
// 注册异步数据加载函数
echarts.registerAction({
type: 'mapDataLoaded',
event: 'mapDataLoaded',
update: 'updateLayout'
}, function (payload, ecModel) {
// 异步加载数据
$.get('dataUrl', function (data) {
// 数据格式化
var formattedData = formatData(data);
// 将数据与地图区域对应
ecModel.eachComponent('series', function (seriesModel) {
if (seriesModel.get('name') === 'mapSeries') {
seriesModel.set('data', formattedData);
}
});
// 更新地图
echarts.getInstanceByDom(document.getElementById('map')).setOption(ecModel);
});
});
// 数据格式化函数
function formatData(data) {
var formattedData = [];
for (var i = 0; i < data.length; i++) {
formattedData.push({
name: data[i].name,
value: data[i].value
});
}
return formattedData;
}
// ECharts配置项
var option = {
series: [{
name: 'mapSeries',
type: 'map',
mapType: 'mapName',
data: []
}]
};
// 初始化ECharts实例
var myChart = echarts.init(document.getElementById('map'));
// 设置ECharts配置项
myChart.setOption(option);
```
在上述示例代码中,`mapJson`是地图的JSON文件,`dataUrl`是需要异步加载的数据接口,`formatData`函数用于将接口返回的数据格式化成ECharts支持的格式,`mapSeries`是ECharts地图系列的名称。
阅读全文