百度知道回答，自定义 tooltip 计算&显示环比增长
百度知道回答，自定义 tooltip 计算&显示环比增长
ZXand618
发布于 2022-04-10 10:01:30
发布于 2022-04-10 10:01:30
思路&做法
思路比较简单，所以使用 tooltip.formatter 设置提示框内容格式。因为 tooltip.formatter 支持回调函数，所以可以同时完成环比增长率的计算和显示。
回调函数格式
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => stringparams 格式（摘自 ECharts 配置项手册）
{
componentType: 'series',
// 系列类型
seriesType: string,
// 系列在传入的 option.series 中的 index
seriesIndex: number,
// 系列名称
seriesName: string,
// 数据名，类目名
name: string,
// 数据在传入的 data 数组中的 index
dataIndex: number,
// 传入的原始数据项
data: Object,
// 传入的数据值
value: number|Array,
// 数据图形的颜色
color: string,
// 饼图的百分比
percent: number,
}series[i]-data 数据
data1 = [10, 52, 200, 334, 390, 330, 220];tooltip 配置
tooltip: {
trigger: 'item',
formatter: function(params) {
// 先拼接当期数值，以及 '，环比增长' 文字
relVal = params.data + '，环比增长';
// 再拼接环比增长率及百分号，或者 '未知' 文字
relVal += params.dataIndex === 0 ? '未知' : ((params.data - data1[params.dataIndex - 1]) * 100 / data1[params.dataIndex - 1]).toFixed(2) + '%';
return relVal;
}
},- params.data：当前数据（鼠标指向的数据相图形）；
- params.dataIndex：当前数据在 data 数组中的 index；
- data1[params.dataIndex - 1]：当前数据项的上期数值；
- params.dataIndex === 0 ? '未知' : <expr> ：周一缺少上期数据，故环比增长率未知
本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2019-06-25，如有侵权请联系 cloudcommunity@tencent.com 删除
本文分享自 ZXand618的ECharts之旅 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！
评论
登录后参与评论
推荐阅读