tooltip.formatter
提示框浮层内容格式器,支持字符串模板和回调函数两种形式。
1、字符串模板
模板变量
折线(区域)图、柱状(条形)图、K线图 : {a}(系列名称),{b}(类目值),{c}(数值), {d}(无)
散点图(气泡)图 : {a}(系列名称),{b}(数据名称),{c}(数值数组), {d}(无)
地图 : {a}(系列名称),{b}(区域名称),{c}(合并数值), {d}(无)
饼图、仪表盘、漏斗图: {a}(系列名称),{b}(数据项名称),{c}(数值), {d}(百分比)
2、回调函数
回调函数格式:
(params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
第一个参数params是formatter需要的数据集,格式如下:
{
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,
}
自定义实例:
1、
formatter : '{b}<br/>{a} : {c}%',
2、
formatter : function(params) {
var result = params[0].name;
params.forEach(function(item) {
if (item.data) {
result += '<br/>' + item.seriesName + ' : ' + item.data + '%';
}
});
return result;
}
3、
formatter: function(params) {
var result = params[0].name+'<br>';
params.forEach(function(item) {
result += '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>';
if(parseFloat(item.data)>=0){
result +=item.seriesName+" : "+'<span style="color:#e30101">'+ item.data+"%</span><br>"
}else if(parseFloat(item.data)<0){
result +=item.seriesName+" : "+'<span style="color:#049500">'+ item.data+"%</span><br>"
}
});
return result;
}
————————————————
版权声明:本文为CSDN博主「yhao2088」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_35542141/article/details/78424607