Uniapp结合ECharts图表时,Tooltip的formatter函数HTML解析失败,导致Tooltip内容显示为纯文本,而非预期的格式化HTML内容,本文分析原因并提供解决方案。
问题:开发者使用formatter函数自定义Tooltip内容,该函数通过生成包含HTML标签的字符串来实现格式化显示(例如颜色、样式、换行)。然而,实际显示结果却是HTML标签被直接显示为文本,而非被解析成HTML元素。部分内容,例如图例中的标记,却能正常显示。
原因分析:问题根源在于Uniapp环境与ECharts源码的冲突。开发者代码中,formatter函数构建的HTML字符串在Uniapp环境下的ECharts中无法被正确解析。这是因为ECharts源码中存在typeof wx的判断语句,用于区分不同运行环境。在Uniapp中,typeof wx返回'object',而ECharts预期为'undefined',导致HTML解析流程出错。
解决方案:修改ECharts源码,消除typeof wx判断语句的冲突。需要找到ECharts源码中包含typeof wx判断的代码段,修改其逻辑,使其能够正确识别Uniapp环境。这需要开发者具备一定的ECharts源码理解和修改能力。 修改后,formatter函数生成的HTML代码将被正确解析并渲染在Tooltip中。 这并非简单的配置修改,而是需要直接修改ECharts库文件。 建议寻找合适的ECharts版本或社区解决方案,以避免直接修改源码带来的潜在风险。