ECharts地圖圖表tooltip顯示多條數據(疫情項目vue)


  前端展示需要把字段都顯示在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.效果如下:

       


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM