ECharts图表tooltip显示多条数据效果
在做ECharts图表开发时,会遇到提示框浮层显示多条数据的需求,后端返参如下图所示:前端展示需要把所有字段都显示在tooltip里,这时我们需要用到formatter格式器。我们知道这个地方的数据入口在series的data里,因此我们只需要处理一下放入data里面的数据格式即可。首先我们在vue data里面声明一个数组:data() {return {...
·
在做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}%)`
)
}
}
效果如下:
更多推荐
已为社区贡献2条内容
所有评论(0)