Echarts 地图飞线图数据更新指南
要根据数据更新 Echarts 地图飞线图,需要以下步骤:
-
获取 Echarts 实例对象,并在 option 中设置 series 数据。
-
将数据处理成符合 series 格式的数据,可以使用 Echarts 提供的数据转换工具,如 geoCoordMap 和 convertToLineData 等。
-
调用 setOption 方法将处理后的数据更新到 Echarts 实例中。
例如,以下代码演示了如何将两个城市之间的人口迁移数据更新到 Echarts 地图飞线图中:
// 获取 Echarts 实例对象
var myChart = echarts.init(document.getElementById('myChart'));
// 设置 option 中的 series 数据
var option = {
series: [{
type: 'lines',
coordinateSystem: 'geo',
data: [],
polyline: true,
silent: true,
lineStyle: {
normal: {
color: '#c23531',
width: 1,
opacity: 0.5,
curveness: 0.2
}
}
}]
};
// 处理数据成符合 series 格式的数据
var data = [
{from: '北京市', to: '上海市', value: 1000},
{from: '上海市', to: '北京市', value: 800},
];
var geoCoordMap = {
'北京市': [116.407395, 39.904211],
'上海市': [121.473701, 31.230416],
};
var convertedData = [];
data.forEach(function (item) {
var fromCoord = geoCoordMap[item.from];
var toCoord = geoCoordMap[item.to];
if (fromCoord && toCoord) {
convertedData.push({
coords: [fromCoord, toCoord],
value: item.value
});
}
});
// 更新 Echarts 实例中的数据
option.series[0].data = convertedData;
myChart.setOption(option);
通过上述步骤,就可以根据数据更新 Echarts 地图飞线图了。
原文地址: https://www.cveoy.top/t/topic/lq1T 著作权归作者所有。请勿转载和采集!