问题
在使用 echarts 配置图表时,tooltip
提示框的格式不能满足需求,这时需要自定义格式,echarts 文档中给出的方案是配置 tooltip.formatter
解决方案
tooltip.formatter
支持字符串模板和回调函数两种形式,官方文档内容这里就不赘述了,请自行查阅 echarts tooltip.formatter文档,这里主要说一下回调函数格式化方式
// params 具体信息看下方
formatter: function(params){
let result = params[0].name + "<br />";
params.forEach(function(item){
// item.marker是自带的小圆点标识
result += item.marker + item.seriesName + ": " + item.value + " kb/s<br />";
})
return result;
}
params 具体信息
[{
"componentType": "series",
"componentSubType": "line",
"componentIndex": 0,
"seriesType": "line",
"seriesIndex": 0,
"seriesId": "\u0000上传\u00000",
"seriesName": "上传",
"name": "09:28:38",
"dataIndex": 4,
"data": 5,
"value": 5,
"color": "#5470c6",
"dimensionNames": ["x", "y"],
"encode": {
"x": [0],
"y": [1]
},
"$vars": ["seriesName", "name", "value"],
"axisDim": "x",
"axisIndex": 0,
"axisType": "xAxis.category",
"axisId": "\u0000series\u00000\u00000",
"axisValue": "09:28:38",
"axisValueLabel": "09:28:38",
"marker": "<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#5470c6;\"></span>"
}, {
"componentType": "series",
"componentSubType": "line",
"componentIndex": 1,
"seriesType": "line",
"seriesIndex": 1,
"seriesId": "\u0000下载\u00000",
"seriesName": "下载",
"name": "09:28:38",
"dataIndex": 4,
"data": 5,
"value": 5,
"color": "#91cc75",
"dimensionNames": ["x", "y"],
"encode": {
"x": [0],
"y": [1]
},
"$vars": ["seriesName", "name", "value"],
"axisDim": "x",
"axisIndex": 1,
"axisType": "xAxis.category",
"axisId": "\u0000series\u00001\u00000",
"axisValue": "09:28:38",
"axisValueLabel": "09:28:38",
"marker": "<span style=\"display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:#91cc75;\"></span>"
}]
网友评论