uniapp集成echarts图表时，tooltip的formatter函数无法解析html标签问题及解决方案
在uniapp应用中使用echarts图表并自定义tooltip提示框内容时，formatter函数中的HTML标签有时无法被正确解析渲染，而是直接显示HTML字符串。本文分析此问题原因并提供解决方案。
问题描述:
uniapp项目中，开发者在echarts图表的formatter函数内使用HTML标签格式化tooltip内容，但结果显示为纯文本，仅部分marker（如圆点）正常显示，其他HTML标签（如
立即学习“前端免费学习笔记（深入）”；
示例代码：
tooltip: {
trigger: "axis",
axisPointer: {
lineStyle: {
color: "#FF8B02"
}
},
formatter: (e) => this.getCurrentDate(e)
},
getCurrentDate(params) {
let res = "";
let time = `${params[0].axisValue}
`;
res += time;
for (let i = 0; i < params.length; i++) {
res += `${params[i].marker}
${params[i].seriesName}
${params[i].data}
`;
}
return res;
}
问题根源:
此问题通常源于echarts源码与uniapp框架的变量冲突。echarts源码中可能存在名为wx的变量，而uniapp框架也使用wx变量，导致echarts无法正确识别和处理uniapp环境下的HTML解析。
解决方案:
直接修改echarts源码，避免变量名冲突。 找到echarts源码中与wx冲突的变量，将其重命名为其他名称，例如uniWx。 这需要一定的代码理解能力和修改源码的风险意识。 请谨慎操作，并备份原始源码。 修改后，重新编译echarts并集成到uniapp项目中。
替代方案 (推荐):
为了避免直接修改echarts源码的风险，建议使用rich属性来格式化tooltip内容，而不是依赖HTML标签的解析。 rich属性允许你定义不同样式的文本段落，从而达到类似HTML标签的效果，且兼容性更好。
示例代码：
tooltip: {
trigger: 'axis',
formatter: function (params) {
let html = '';
params.forEach(item => {
html += `{a|${item.name}}: {b|${item.value}}\n`;
});
return html;
},
rich: {
a: {
color: '#333',
fontSize: 14,
fontWeight: 'bold'
},
b: {
color: '#ff9900',
fontSize: 16
}
}
};
此方法无需修改echarts源码，更安全可靠，也更符合echarts的最佳实践。 通过定义不同的rich属性，你可以灵活控制tooltip中不同文本段落的样式，例如颜色、字体大小、粗细等。 这是一种更推荐的解决方法。
