图表中的文本如何折行显示

说明：下文描述的属性设置方法仅限于ECharts的图表

图表中为文办包含图例文本，X轴和Y轴的刻度文本，图表上的文本标签以及图表的tooltip文本。

1.图表文本标签折行显示方法

图表中图例文本折行，X轴文本标签折行、Y轴文本标签折行，图表上的文本标签折行方式相同，可以通过各自的formatter方法，使用分隔符 '\n' 对内容进行换行处理。

例如：

formatter: funtion(params){
    return ['第一行', '第二行', '第三行'].join('\n')
},

2.tooltip折行显示方法

tooltip的换行与图表中其他内容的换行方式不同。tooltip换行也需要使用formatter方法，但是需要使用 '<br/>'换行符。

例如：

formatter: funtion(params){
    return ['第一行', '第二行', '第三行'].join('<br/>')
},

tooltip中是可以支持html，我们还可以通过html标签进行换行处理。

例如：

formatter: function(params) {
return `<div style="display:block;max-width: 200px;word-break: break-all;word-wrap: break-word;white-space:pre-wrap">${params.data.name}</div>`
}

3.自定义提示框的换行处理

如果使用了tooltip的自定义提示框功能，并对内容要进行细致的折行操作，也可以通过formatter的方法进行处理。

此时formatter的入参会增加一个参数。例如：一个柱图，图表的绑定字段为'省份'和'订单数量'，在自定义提示框中我们添加了一个'地区'。自定义提示框的内容如下图所示： formatter函数中我们会传入一个tipDatas参数，tipDatas中的数据格式是一个数组，数组中的每一项对应提示框中每一行数据内容。

上图辽宁省对应的tipDatas内容如下：

['省份: 辽宁省', '订单数量: 1462', '地区: 东北']

此时我们在formatter函数中可以通过如下方式获取tipDatas的内容，并对其进行折行等逻辑的加工处理。

formatter: function(params, tipDatas){
   return tipDatas.join('<br/>')
},

图表文本如何换行