前端展示需要把字段都顯示在tooltip里,需要用到formatter格式器。這個地方的數據入口在series的data里,我們只需要處理一下放入data里面的數據格式即可。
1.首先我們在vue data里面聲明一個數組:
data() { return { resdata: [] } },
2.用js中的map里面的方法處理你想要的數據:
this.resdata= res.data.list[0].city.map(item => { let myCity = {} myCity .name = item.name myCity .value = item.conNum myCity .deathNum=item.deathNum myCity .cureNum=item.cureNum myCity .econNum = item.econNum myCity .susNum=item.susNum myCity .conadd=item.conadd return myCity })
3.把處理好的resdata放入series的data里:
series: [ { //根據自己的需求去添加其他的series參數 data: this.resdata, } ]
4.添加到formatter,然后就可以渲染到地圖上了
formatter: function(a, b) { return ( `地區:${a['name']}</br>累計確診: ${a['data'].value}</br>現存確診: ${a['data'].econNum}</br>已治愈人數: ${a['data'].cureNum}</br>較昨日增加人數: ${a['data'].conadd}` ) }
5.效果如下: