美文网首页
echarts tooltip.formatter回调函数方式格

echarts tooltip.formatter回调函数方式格

作者: 深吸一口气 | 来源:发表于2021-05-18 09:35 被阅读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>"
}]

相关文章

  • echarts tooltip.formatter回调函数方式格

    问题 在使用 echarts 配置图表时,tooltip提示框的格式不能满足需求,这时需要自定义格式,echart...

  • OpenCV 教程 02 : 创建滑块

    示例代码 回调函数方式 非回调函数方式 运行结果

  • 防抖和节流

    当回调函数开销较大时,这样很浪费性能,比如页面有多个echarts图表,页面resize时,echarts也res...

  • 异步的实现

    异步的三种实现方式: 回调函数事件Promise 回调函数 回调函数不一定是异步 但是异步一定是回调函数。 事件 ...

  • python之回调函数和装饰函数

    一.回调函数 1.回调函数的概念: 是在某一函数中调用另一个函数变量方式,来执行函数.回调函数不是有实现方调用,...

  • node 异步编程

    回调函数方式缺点:回调地狱、异步并发控制困难 Promise Async / Await

  • golang学习笔记(五)函数

    1、书写方式 2、函数类型 函数类型也是一种数据类型,通过type起名 3、回调函数 回调函数:函数的参数是函数类...

  • 2019-06-17

    Ajax原理 创建对象 回调函数主体 初始化请求 发送请求 设定回调函数 经典方式 $.ajax({ url:"发...

  • react中ref的两种使用方法

    ref一共有两种使用方式 回调函数形式(官方推荐) string形式 第一种 回调函数形式 回调函数形式一共有三种...

  • JavaScript函数_08回调函数

    回调函数 回调函数(回调),当我们把某个函数作为参数传递给另一个函数的时候,这个函数就是回调函数 回调函数的基本写...

网友评论

      本文标题:echarts tooltip.formatter回调函数方式格

      本文链接:https://www.haomeiwen.com/subject/ohdejltx.html