### 解决 ECharts 中 formatter 函数内 HTML 代码未被正确解析的问题 当遇到 ECharts 的 `formatter` 函数无法正确解析 HTML 代码的情况时，可以采取一些措施来确保 HTML 内容能够正常显示。 #### 使用 rich 文本格式替代直接嵌入 HTML ECharts 支持一种名为 rich 文本的特殊格式，允许定义复杂的样式而无需依赖于原生 HTML。通过这种方式可以在图表中实现更丰富的文本展示效果而不必担心浏览器兼容性和安全性问题[^1]。 ```javascript option = { tooltip: { formatter: function (params) { return '{a|' + params.name + '}\n{b|Value: ' + params.value + '}'; }, textStyle: { rich: { a: { color: '#ff0000', fontSize: 18, fontWeight: 'bold' }, b: { color: '#00ff00', fontSize: 16 } } } } }; ``` #### 启用安全模式下的有限制 HTML 渲染 如果确实需要使用部分 HTML 标签，在确认数据源可信的前提下，可以通过设置全局配置项中的 `tooltip.extraCssText` 来绕过默认的安全过滤机制并启用某些特定标签的支持[^2]： ```javascript echarts.init(document.getElementById('main'), null, { renderer: 'canvas', // 或者其他渲染器选项 width: 600, height: 400, }).setOption({ tooltip: { extraCssText: 'white-space: pre-wrap;', // 添加自定义 CSS 属性 formatter: function (param) { return `<div style="color:red;">${param.seriesName}</div><br/>Value:${param.data}`; } } }); ``` 需要注意的是这种方法存在一定的风险，仅适用于完全信任的数据环境，并且不同版本间行为可能有所差异。 #### 利用图形元素作为容器承载复杂结构 对于更加复杂的布局需求，则考虑利用 echarts 提供的各种 graphic 组件构建自定义形状或者组合多个基本组件形成所需的视觉效果，从而避开直接操作 DOM 结构所带来的麻烦[^3]。 ```javascript var option = { series: [{ type: 'pie', data: [ {value: 335, name: 'Direct Access'}, ... ], labelLine: {show: false}, label: { normal: { show: true, position: 'inside', formatter: function(params){ var htmlStr = ` <svg xmlns="http://www.w3.org/2000/svg"> <!-- 自定义 SVG 图形 --> </svg> `; return htmlStr; }, rich: {} } } }] }; ``` 尽管上述方法提供了几种不同的解决方案，但在实际应用过程中还需要根据具体场景和个人偏好做出适当调整。