Appearance
专项答疑
自定义悬浮框内容
悬浮框（Tooltip）主要用于展示某一图形的详细数据，有时需要做局部修改以适配业务细节
一、修改单位
当不同系列单位不同时，比如柱子的单位是金额（万元）且保留两位小数，折线的单位是%且保留一位小数（此时不改动悬浮框的整体结构，只是微调数值部分内容），需要通过如下方法调整配置：
给每个series添加一个tooltip配置，配置其valueFormatter值为一个函数，在函数中处理其小数保留逻辑和单位，不同的series写不同的配置即可完成区别。
js
"series": [
{
"type": "bar",
"tooltip": {
"valueFormatter": d=>d.toFixed(2)+'万元',
}
},
{
"type": "line",
"tooltip": {
"valueFormatter": d=>d.toFixed(1)+'%',
}
}
],二、需要改变整体悬浮框的结构
当上述方案不满足条件时，需要自定义整个Tooltip的内容，此时，我们需要在tooltip的formatter参数中编写一个较长的函数，返回一个dom结构让图表进行渲染，图表会把对应的内容以类似innerHTML的形式加入到悬浮框中
js
formatter: (d)=>{
let result = `<div>${d[0].axisValue}</div>`
// 处理数据中的每一项
d.forEach(bar=>{
result += `<div>${bar.marker}${bar.seriesName}：${bar.data[bar.seriesIndex+1]}${bar.seriesIndex === 0 ? '%' : '万元'}</div>`
})
// 自定义添加一行新的数据
result += `<div><span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#ffcb2e;"></span>预算金额：xxxxx万元<span></span></div>`
return result
}