echarts代码格式化_echarts自定义tooltip内容格式

在echarts使用过程中，经常会使用到tooltip作为提示信息，以柱形图为例

在开发过程中，遇到了tooltip中内容过长，导致显示出屏幕外的问题。

由于tooltip不会自动换行，所以需要用到formatter自定义使其换行

代码如下：

tooltip: {trigger: 'axis', axisPointer: {type: 'shadow', shadowStyle: {color: 'rgba(0,0,0,0)'}},

formatter: function(value: string): string {

let ret: string = '';

const maxLength: number = 20;

const valLength: number = value[0]['name'].length;

const rowN: number = Math.ceil(valLength / maxLength);

if (rowN > 1) {

for (let i: number = 0; i < rowN; i++) {

let temp: string = '';

const start: number = i * maxLength;

const end: number = start + maxLength;

temp = '
' + value[0]['name'].substring(start, end);

ret += temp;

}

return value[0]['seriesName'] + ret + ':' + value[0]['value'];

} else {

return `${value[0]['seriesName']}
${value[0]['name']} : ${value[0]['value']}`;

}

}}

其中换行尝试使用了 '\n'，发现并不起作用，在前后增加空格也无法实现换行。

最终选择了添加

标签

在使用formatter的过程中 ，可以将传递进来的参数在控制台打印，方便查看其数据结构。