echarts tooltip.formatter回调函数方式格

2021-05-18  本文已影响0人  深吸一口气

问题

在使用 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>"
}]
上一篇 下一篇

猜你喜欢

热点阅读