echarts 移动端tooltip怎么展示

ECharts 是一款非常流行的开源数据可视化库，其在移动端提供了丰富的图表和交互功能，包括 tooltip（提示框）。为了在移动设备上优化 tooltip 的显示，你可以考虑以下几个方面：

1. **触摸友好**：移动端的 tooltip 需要考虑到触屏操作，尽量简洁易触。可以选择弹出式或悬浮式的样式，避免遮挡关键信息。

   <div id="main" style="width: 600px;height: 400px;"></div>

2. **自适应大小**：当屏幕宽度变小时，tooltip 可能需要调整其内容的高度和宽度，确保在不同分辨率下都能清晰可见。

3. **延迟显示/隐藏**：为防止频繁触发 tooltip，可以在手指接触图表一段时间后再显示 tooltip，离开图表时再自动消失。

4. **触碰关闭**：允许用户通过点击 tooltip 外部区域或某个特定区域关闭 tooltip。

5. **触摸事件**：处理 touchstart、touchmove 和 touchend 事件，以便根据用户的触摸行为进行响应。

var myChart = echarts.init(document.getElementById('main'));

myChart.setOption({
    tooltip: {
        trigger: 'item', // 触发类型
        position: ['50%', '70%'], // 悬浮位置
        formatter: function (params) { // 格式化提示内容
            return params.name + '<br>' + params.value;
        },
        showDelay: 300, // 显示延时
        hideDelay: 200, // 隐藏延时
        onShow: function (dom) {
            dom.style.zIndex = '99'; // 提高层级
        },
        onHide: function () {
            dom.style.zIndex = ''; // 还原层级
        }
    }
});