echarts tooltip.formatter回调函数方式格式化提示框

问题

在使用 echarts 配置图表时,tooltip提示框的格式不能满足需求,这时需要自定义格式,echarts 文档中给出的方案是配置 tooltip.formatter

解决方案

tooltip.formatter支持字符串模板和回调函数两种形式,官方文档内容这里就不赘述了,请自行查阅 echarts tooltip.formatter文档,这里主要说一下回调函数格式化方式

// params 具体信息看下方
formatter: function(params){
    let result = params[0].name + "
"; params.forEach(function(item){ // item.marker是自带的小圆点标识 result += item.marker + item.seriesName + ": " + item.value + " kb/s
"; }) 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": ""
}, {
    "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": ""
}]

你可能感兴趣的:(echarts tooltip.formatter回调函数方式格式化提示框)