cannot use '\n' in custom format text

[Zane Zhang]

such as code below, '\n' is replaced by toString

label: { // 在文本中，可以对部分文本采用 rich 中定义样式。 // 这里需要在文本中使用标记符号： //{styleName|text content text content}` 标记样式名。
// 注意，换行仍是使用 '\n'。
formatter: [
'{a|这段文本采用样式a}',
'{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'
].join('\n'),

// 这里是文本块的样式设置：
color: '#333',
fontSize: 5,
fontFamily: 'Arial',
borderWidth: 3,
backgroundColor: '#984455',
padding: [3, 10, 10, 5],
lineHeight: 20,

// rich 里是文本片段的样式设置：
rich: {
    a: {
        color: 'red',
        lineHeight: 10
    },
    b: {
        backgroundColor: {
            image: 'xxx/xxx.jpg'
        },
        height: 40
    },
    x: {
        fontSize: 18,
        fontFamily: 'Microsoft YaHei',
        borderColor: '#449933',
        borderRadius: 4
    },
}

}
`

[Thomas Leiter]

Can you give me a small static example in order to reproduce this issue?

regards,
Tom

[EngsShi]

same issue

[T.S]

Formatter doesn't work, any plan to add this @tomLadder ?

[Thomas Leiter]

@SHIEER Yes someone should definitely have a look at it.

[EngsShi]

const airOption2 = ({
xAxisData,
seriesData,
color = '#848dc8',
}) => {
return {
color: color,
grid: {
right: 20,
left: 40,
top: 20,
bottom: 80
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: xAxisData,
splitLine: {
show: false
},
axisLine: {
show: false
},
axisLabel: {
rotate: 45,
formatter: function (value, index) {
return value + "\n"; // here
},
// formatter: function (value, index) {
// return value
// .toString()
// .split('')
// .join('\n')
// }
}
},
yAxis: {
type: 'value',
splitLine: {
show: true
},
axisLine: {
show: false
}
},
series: [
{
data: seriesData,
type: 'bar',
barWidth: '30%',
itemStyle: {
barBorderRadius: [5, 5, 5, 5],
width: 50,
top: 10
},
label: {
show: true,
position: 'top',
}
}
]
}
}

it will catch, if you add '\n'。
SyntaxError: Unexpected identifier 'yAxis'. Expected a ';' following a return statement

[EngsShi]

formatter: function (value, index) {
return value + "(\n)"; // here
},

if use "(\n)" or "\n;" will nothing happened

[Thomas Leiter]

Currently working on v2.0.0. Will be fixed!

Cheers,
Tom

[Thomas Leiter]

Just released v2.0.0 🎉