uni-app解决H5环境下echarts tooltip无法显示html的问题

发布于 1周前 作者 itying888 来自 Uni-App

uni-app解决H5环境下echarts tooltip无法显示html的问题

我使用的是目前echarts最新版本5.4.3，安装方式是npm

其他帖子说在main.js中添加以下代码，但本人添加后依旧无效

window.wx = undefined

看了源码之后，发现确实是window.wx的问题，echarts识别为微信环境了。

但为什么已经设置为undefined了还是误判了呢？于是我输出了一下加载顺序，发现main.js中此行代码的执行顺序比echarts初始化晚，但我已经放到第一行了。

什么原因呢，我发现import导入模块的执行顺序比其他代码优先，而echarts是在导入时就执行初始化了，所以不管我写在哪就会比echarts初始化晚。

如何解决呢？那就新建一个自定义模块，在自定义模块中设置window.wx就好了嘛，以下为模块代码：

if(window.wx) {  
    window.wx = undefined  
}  

export default {  

}

然后在main.js第一行导入该模块，刷新一下，html就正常显示啦。


Harmonyos Next教程
1 回复

在uni-app的H5环境下，ECharts的tooltip默认不支持HTML内容的显示。这是由于ECharts在不同平台上的渲染机制有所差异，特别是在移动端和Web端的表现上。为了在H5环境下让ECharts的tooltip显示HTML内容，我们需要对ECharts的配置进行一些调整，并利用ECharts提供的formatter函数以及rich属性来自定义tooltip的内容。

以下是一个示例代码，展示了如何在uni-app的H5项目中配置ECharts以支持HTML格式的tooltip：

// 引入ECharts
import * as echarts from 'echarts';

// 假设我们有一个页面，其中包含一个用于渲染ECharts的DOM元素
const chartDom = document.getElementById('mychart');
const myChart = echarts.init(chartDom);

// 配置项，这里我们设置了tooltip的formatter，并利用rich属性来定义HTML样式
const option = {
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            let tooltipHtml = `<div style="padding: 10px;">`;
            params.forEach(param => {
                tooltipHtml += `<div style="margin-bottom: 8px;">
                    <span style="color: ${param.color};">${param.marker}</span>
                    <span style="font-size: 16px; font-weight: bold;">${param.seriesName}: </span>
                    <span>${param.value}</span>
                </div>`;
            });
            tooltipHtml += `</div>`;
            return tooltipHtml;
        },
        rich: {
            a: {
                color: '#900',
                lineHeight: 22,
                align: 'left'
            }
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};

// 使用配置项生成图表
myChart.setOption(option);

// 如果是在uni-app中，你可能需要在页面生命周期函数中执行上述代码
// 例如在onLoad或mounted中
export default {
    onLoad() {
        // 上述ECharts初始化代码可以放在这里
    }
}

在上述代码中，我们通过formatter函数返回了一个HTML字符串，这个字符串包含了tooltip的内容。同时，我们还使用了rich属性来定义一些基础的样式，虽然在这个例子中并没有直接使用到rich属性中的样式定义，但它为自定义更复杂的HTML内容提供了可能。

请注意，由于uni-app可能封装了Webview等组件来渲染H5页面，因此在实际项目中，确保ECharts的版本和配置与uni-app的兼容性是非常重要的。

回到顶部