思路&做法
思路比较简单,所以使用 tooltip.formatter 设置提示框内容格式。因为 tooltip.formatter 支持回调函数,所以可以同时完成环比增长率的计算和显示。
回调函数格式
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
params 格式(摘自 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;
}
},
本文分享自 ZXand618的ECharts之旅 微信公众号,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体同步曝光计划 ,欢迎热爱写作的你一起参与!