echarts的地图组件很多人都在前端项目中使用过,是不是方便又快捷,地图动态数据如何与后端发来的数据进行绑定呢?
简单来讲,就是从接口获取到的数据,需要在图表的方法里再次定义一下,然后用setOption方法就可以获取到了。
首先看后端发来的数据长什么样子
- 0: {Address: "吉林", Count: 1}
- 1: {Address: "宁夏", Count: 1}
- 2: {Address: "海南", Count: 1}
- 3: {Address: "河北", Count: 1}
- 4: {Address: "内蒙古", Count: 1}
- 5: {Address: "山东", Count: 2}
- 6: {Address: "江西", Count: 1}
- 7: {Address: "广西", Count: 1}
地图的需求是鼠标放在某一个地区,要显示对应的内容,还有个各个省的数据。
data中的定义
profileData: [], // 地图数据
Address: '', // 地址所在省份
Count: '', // 当前省份的设备数量
前端代码实现
loadDeviceData() {
const parameters = {
pageIndex: this.query.pageIndex,
pageSize: this.query.pageSize,
};
console.log('请求参数:', parameters); // 记录请求参数
this.$http.post('http://localhost:8081/ktsEcloud/DeviceController/GetDeviceLocation', parameters)
.then(response => {
console.log('响应数据:', response.data); // 记录响应数据
const addressData = response.data.data; // 获取后端返回的数据
// 检查 addressData 是否为数组
if (Array.isArray(addressData)) {
// 将后端数据直接转换为图表需要的数据格式
this.map = addressData.map(item => ({
Address: item.Address, // 省份名称
Count: item.Count // 设备数量
}));
// 调用绘制地图的方法
this.loadMap(this.map);
} else {
console.error('返回的数据格式不正确:', addressData);
this.map = [{ Address: '无数据', Count: 0 }];
this.loadMap(this.map);
}
})
.catch(error => {
console.error('获取设备数据失败:', error);
// 如果有错误,也可以显示一个空地图
this.map = [{ Address: '无数据', Count: 0 }];
this.loadMap(this.map);
});
},
loadMap(data) {
const worldMapContainer1 = document.getElementById('distribution_map');
this.myChart = this.$echarts.init(worldMapContainer1);
// 定义用于 ECharts 的数据
const chartData = data.map(item => ({
name: item.Address,
value: item.Count
}));
const option = {
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
x: 'left',
y: 'bottom',
data: ['已安装设备'],
textStyle: {
color: '#ccc'
}
},
visualMap: {
min: 0,
max: Math.max(...data.map(item => item.Count)) || 1, // 动态设置最大值
left: 'right',
top: 'bottom',
text: ['高', '低'],
calculable: true,
color: ['#26cfe4', '#f2b600', '#ec5845'],
textStyle: {
color: '#fff'
}
},
series: [
{
name: '已安装设备',
type: 'map',
aspectScale: 0.75,
zoom: 1.5,
mapType: 'china',
roam: false,
label: {
normal: {
show: true,
textStyle: { color: '#c71585' }
},
emphasis: {
show: true,
textStyle: { color: '#800080' }
}
},
itemStyle: {
normal: {
borderWidth: 0.5,
borderColor: '#009fe8',
areaColor: '#ffffff'
},
emphasis: {
borderWidth: 0.5,
borderColor: '#4b0082',
areaColor: '#ffdead'
}
},
data: chartData // 使用转换后的数据
}
]
};
this.myChart.setOption(option);
this.myChart.on('click', function (params) {
if (params.componentType === 'series') {
// 点击事件处理
}
});
},
showAlarmRecords(company) {
this.selectedCompany = company;
this.showAlarmDialog = true;
},
goToHistoryData(company) {
this.$router.push({ name: 'EquipmentCharts.vue', params: { company } });
},
goToConfiguration(company) {
// 逻辑处理
}
}
效果