【echarts】图表配置tooltip 的formatter,如何获取并显示返回值的其他字段,附示例 您所在的位置:网站首页 折线图上显示数据是什么 【echarts】图表配置tooltip 的formatter,如何获取并显示返回值的其他字段,附示例

【echarts】图表配置tooltip 的formatter,如何获取并显示返回值的其他字段,附示例

2024-07-16 12:24| 来源: 网络整理| 查看: 265

这里写目录标题 tooltip是什么?formatter 怎么配置?①字符串模板字符串模板示例:②回调函数回调函数示例:

tooltip是什么?

tooltip为提示框组件,实际上就是鼠标移到图表上后展示的类似数据点详情的一个说明。 在options配置项处于第一级目录,tooltip与series,xAxis,yAxis同级。

在这里插入图片描述

formatter 怎么配置?

官方文档:https://echarts.apache.org/zh/option.html#tooltip.formatter formatter有两种配置方式:①字符串模板 ②回调函数

①字符串模板 formatter: '{b0}: {c0}{b1}: {c1}'

模板变量有 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等。 在 trigger 为 ‘axis’ 的时候,会有多个系列的数据,此时可以通过 {a0}, {a1}, {a2} 这种后面加索引的方式表示系列的索引。 不同图表类型下的 {a},{b},{c},{d} 含义不一样。

其中变量{a}, {b}, {c}, {d}在不同图表类型下代表数据含义为:

图表类型含义折线(区域)图、柱状(条形)图、K线图{a}(系列名称),{b}(类目值),{c}(数值), {d}(无)散点图(气泡)图{a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)地图{a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)饼图、仪表盘、漏斗图{a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)

总结:字符串模板自由度比较低,需要根据既定的几个模板变量例如 {a}, {b},{c},{d},{e},分别表示系列名,数据名,数据值等去做拼接来展示,只能展示显示的图表看到的数据,若涉及到除横纵坐标其他隐藏数据字段的展示,字符串模板便无能为力了。

字符串模板示例:

效果: 在这里插入图片描述 代码:

option = { title: { text: 'Stacked Line' }, tooltip: { trigger: 'axis', formatter: "类目值:{b0} {a0}:{c0}封 {a1}:{c1}个 {a2}:{c2}条" }, legend: { data: ['Email', 'Direct', 'Search Engine'] }, xAxis: { type: 'category', boundaryGap: false, data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [ { name: 'Email', type: 'line', stack: 'Total', data: [120, 132, 101, 134, 90, 230, 210] }, { name: 'Direct', type: 'line', stack: 'Total', data: [320, 332, 301, 334, 390, 330, 320] }, { name: 'Search Engine', type: 'line', stack: 'Total', data: [820, 932, 901, 934, 1290, 1330, 1320] } ] }; ②回调函数

回调函数格式:

(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string | HTMLElement | HTMLElement[]

回调函数情况稍有些复杂,我们直接从示例开始看,注意示例的注释。

回调函数示例:

在这里插入图片描述

let res = [ // 接口数据返回格式 { "num":1, "supplyTime": 34, "supplySort": "1", "podCode": "X0005", "startTime": "2023-01-14 05:54:44", }, { "num":2, "supplyTime": 28, "supplySort": "1", "podCode": "X005", "startTime": "2023-01-14 09:54:44", }, { "num":3, "supplyTime": 17, "supplySort": "1", "podCode": "X000", "startTime": "2023-01-14 08:54:44", }, { "num":4, "supplyTime": 2, "supplySort": "1", "podCode": "X035", "startTime": "2023-01-14 09:54:44", }, { "num":5, "supplyTime": 26, "supplySort": "1", "podCode": "0035", "startTime": "2023-01-14 19:54:44", }, ] option = { tooltip: { formatter: (params) => { // 打印确认params是对象还是数组 console.log(params) // 对象:取鼠标悬浮当前项索引params.dataIndex // 数组:取鼠标悬浮当前项索引params[0].dataIndex let index = params.dataIndex let obj = res[index] // 通过索引取当前项完整的接口返回值 let str = `出发顺序:${obj.supplySort} 仓位码:${obj.podCode} 任务生成时间:${obj.startTime}` return str } }, xAxis: { type: 'category', data: res.map(i => {return i.num}) }, yAxis: { type: 'value' }, series: [ { data: res.map(i => {return i.supplyTime}), type: 'bar', } ] }

上面第一个参数 params 是 formatter 需要的数据集,也就是我们鼠标悬浮当前柱的一些数据,我们打印出来看下里面哪些可以用的上: 在这里插入图片描述 通过打印可以看到,params只有横纵坐标轴的值,以及颜色等数据,并没有我们要展示的出发顺序、仓位码等数据。但是我们可以拿到当前项的索引dataIndex,有了索引params.dataIndex加上接口返回值res便可以直接获取当前柱的整个对象,即res[params.dataIndex]。这里要注意的是需先判断params打印出来是对象还是数组,上面我们示例中是个对象,如果是数组时索引为params[0].dataIndex。

说到底,无论是哪种方式,最终formatter的return值都是字符串,所以我们需要做的就是字符串的拼接,回调函数的方式的优势在于处理字符串更加灵活,调用属性的方式获取想要的值,可读性更高。



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有