ECharts图表tooltip显示多条数据效果

在做ECharts图表开发时，会遇到提示框浮层显示多条数据的需求，后端返参如下图所示：

前端展示需要把所有字段都显示在tooltip里，这时我们需要用到formatter格式器。我们知道这个地方的数据入口在series的data里，因此我们只需要处理一下放入data里面的数据格式即可。

首先我们在vue data里面声明一个数组：

data() {
    return {
        testRes: []
    }
},

然后用map方法处理一下数据：

this.testRes = res.responBody.map(item => {
     let jsonData = {}
     jsonData.name = item.adminArea
     jsonData.value = item.orgNum 
     jsonData.regCapital = item.regCapital 
     jsonData.employeeNum = item.employeeNum 
     jsonData.orgNumPercent = item.orgNumPercent 
     jsonData.regCapitalPercent = item.regCapitalPercent 
     jsonData.employeeNumPercent = item.employeeNumPercent 
     return jsonData
})

这里需要注意，新组成的数组一定要含name和value这两个字段，否则ECharts会报错。

然后我们把处理好的testRes放入series的data里：

series: [
    {
         // 其他参数已省略，请自行添加
         data: _this.testRes,
    }
]

最后在formatter拼接上去：

tooltip: {
    trigger: 'item',
    formatter: function(a, b) {
        return (
            `${a['name']}</br>机构数量: ${a['value']} (${a['data'].orgNumPercent}%)</br>注册资金: ${a['data'].regCapital} 亿元 (${a['data'].regCapitalPercent}%)</br>职工人数: ${a['data'].employeeNum} (${a['data'].employeeNumPercent}%)`
        )
    }
}

效果如下：