ECharts折线图tooltip提示框格式自定义

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;}