echarts tooltip formatter解析不了HTML
时间: 2023-07-30 12:04:48 浏览: 71
是的,ECharts的tooltip formatter默认会将返回的字符串作为纯文本进行解析,不会解析其中的HTML标签。这是因为默认情况下,ECharts的tooltip会对formatter返回的字符串进行转义,以防止XSS攻击和其他安全问题。
如果您想要在tooltip中使用HTML标签,可以通过设置tooltip的`formatter`属性为一个函数,并使用ECharts提供的`rich`属性来定义富文本样式。下面是一个示例:
```javascript
formatter: function (params) {
return '<span style="color: red;">' + params.value + '</span>';
},
```
在这个示例中,我们直接在formatter函数中定义了一个带有样式的`<span>`标签。
另外,如果您需要更复杂的HTML结构或样式,可以使用ECharts的`rich`属性来定义自定义的富文本样式。例如:
```javascript
tooltip: {
formatter: function (params) {
return '{a|' + params.name + '}<br/>{b|' + params.value + '}';
},
rich: {
a: {
color: 'red',
fontSize: 16,
fontWeight: 'bold'
},
b: {
color: 'blue',
fontSize: 12
}
}
}
```
在这个示例中,我们定义了两个自定义样式:`a`和`b`。`a`样式用于名称,设置为红色、粗体,并具有16px的字体大小;`b`样式用于数值,设置为蓝色和12px的字体大小。然后我们在formatter函数中使用`{a|}`和`{b|}`来引用这些自定义样式。
请注意,为了使rich属性生效,您需要在ECharts的相关版本中进行支持。