ECharts自定义Tooltip HTML内容不生效，可能是格式或安全模式限制导致。

Question

在使用ECharts自定义Tooltip时，若HTML内容不生效，通常与格式错误或安全模式限制有关。首先，确保`tooltip`的`formatter`函数返回的是合法的HTML字符串，而非纯文本或错误拼接的内容。例如，缺少闭合标签或特殊字符未转义都可能导致渲染失败。 其次，ECharts默认启用了安全模式，限制了部分HTML内容的执行，以防止XSS攻击。如果需要加载复杂HTML（如图片、按钮等），需通过设置`tooltip.extraCssText`补充样式，或在初始化图表时，将容器的`dom`设置为可信任源。 解决方法：检查HTML字符串格式是否正确，确认无语法错误；若仍无效，尝试关闭安全模式（仅用于受控环境）。测试时，可先用简单HTML验证功能是否正常，再逐步增加复杂性。

Answer 1

1. 初步了解问题

在使用ECharts自定义Tooltip时，HTML内容不生效是常见的问题。这通常与格式错误或安全模式限制有关。

首先，确保`tooltip`的`formatter`函数返回的是合法的HTML字符串。例如：

        tooltip: {
            formatter: function (params) {
                return '<div>' + params.name + '</div>';
            }
        }
    

如果HTML字符串中缺少闭合标签或特殊字符未转义，可能会导致渲染失败。

2. 分析可能的原因

ECharts默认启用了安全模式，限制了部分HTML内容的执行，以防止XSS攻击。这种安全机制可能导致复杂HTML（如图片、按钮等）无法正常加载。

以下是几种常见情况：

• HTML字符串格式错误：缺少闭合标签或未正确转义特殊字符。
• 安全模式限制：ECharts默认的安全模式阻止了某些HTML功能的执行。
• 样式不足：复杂HTML需要额外的CSS支持，可以通过`tooltip.extraCssText`补充。

3. 解决方案

解决方法分为以下几个步骤：

1. 检查HTML字符串格式是否正确，确认无语法错误。
2. 尝试关闭安全模式（仅用于受控环境）。
3. 测试时，先用简单HTML验证功能是否正常，再逐步增加复杂性。

以下是一个关闭安全模式的例子：

        var chart = echarts.init(document.getElementById('main'), null, {
            renderer: 'canvas',
            useDirtyRect: false,
            secureHtml: true // 设置为true以启用安全模式
        });
    

4. 测试与验证

为了确保解决方案有效，可以按照以下流程进行测试：

graph TD;
            A[开始] --> B[检查HTML字符串];
            B --> C{是否正确};
            C --否--> D[修正HTML字符串];
            C --是--> E[检查安全模式];
            E --> F{是否启用};
            F --是--> G[关闭安全模式];
            F --否--> H[测试简单HTML];
            H --> I{是否正常};
            I --否--> J[逐步排查];
            I --是--> K[完成];

通过上述流程图，可以系统地解决问题并验证结果。

5. 进阶技巧

对于更复杂的场景，可以结合`tooltip.extraCssText`来增强HTML的表现力。例如：

        tooltip: {
            extraCssText: 'box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); border-radius: 5px;',
            formatter: function (params) {
                return '<img src="' + params.value + '" style="width:50px;height:50px;">';
            }
        }
    

通过这种方式，可以灵活地控制Tooltip的外观和功能。