在做项目实现请求接口数据,作用在echarts地图上时遇到了问题
首先在echart初始化配置数据的格式是data这里
series: [
{
type: 'scatter',
coordinateSystem: 'geo' // 对应上方配置
},
{
name: '用户数量', // 浮动框的标题
type: 'map',
geoIndex: 0,
data: [{ name: '黔南布依族苗族自治州', value: 1 }]
}
]
在setup函数里定义了在echarts初始化时用到的数据
const dataCity = ref([]);
GET_CITY_STAR({ province: pText }).then(res => {
dataCity.value = res.data.data.map(item => {
return {
name: item.name,
value: 1
};
});
});
console.log(dataCity);
在打印dataCity时发现没有数据
原因是setup函数是一个同步函数,而请求接口时异步,异步函数.then里的操作是在同步操作后,因此需要把echarts初始化函数写在then里
修改后:
const chinaConfigure = subText => {
let myChart = echarts.init(document.getElementById('myEchart')); //这里是为了获得容器所在位置
window.onresize = myChart.resize;
GET_CITY_STAR({ province: pText }).then(res => {
dataCity.value = res.data.data.map(item => {
return {
name: item.name,
value: 1
};
});
// 异步获取数据成功
// 初始化echarts
myChart.setOption({
..
/** 相关配置 */
...
series: [
{
type: 'scatter',
coordinateSystem: 'geo' // 对应上方配置
},
{
name: '用户数量', // 浮动框的标题
type: 'map',
geoIndex: 0,
data: dataCity.value // 获取到接口返回的数据
}
]
});
myChart.on('click', function (params) {
console.log(params.data); //此处写点击事件内容
if (params.data?.value == 1) {
itemShow.value = true;
} else {
itemShow.value = false;
}
}); //点击事件,此事件还可以用到柱状图等其他
});
};
完美解决了问题