echarts的tooltip一直不显示

Question

打开一个dialog,里面写了个echarts 但是echarts的tooltip一直不显示，是哪块出了问题呢？

<span style="font-weight: normal;color: #0076fe;text-decoration: underline;cursor: pointer;" @click="openHistorySession()">{{currentSession}}</span>


            //打开session趋势图
            openHistorySession(){
                this.dialogVisible = true;
                this.$nextTick(() => {
                    this.initSessionEcharts();
                })
            },

            initSessionEcharts() {
                // 初始化时间范围  默认查询最近一天
                this.timeRange = [new Date( new Date().getTime() - 60 * 60 * 1000 *24) , new Date()]
                this.queryHistorySession()
            },
            queryHistorySession(){
                var param = {
                    nodeId: this.$route.params.nodeId,
                    startTime: this.timeRange[0].getTime(),
                    endTime: this.timeRange[1].getTime()
                }
                selectHistorySessionInfo(param).then(res =>{
                    if  (res.data.code == 200 ){
                        if (this.sessionChart) {
                            this.sessionChart.dispose(); // 避免重复 init 冲突
                        }
                        this.sessionChart = echarts.init( this.$refs.historySessionRef);
                        var sessionOption = {
                            tooltip: {
                                trigger: 'axis',
                                formatter: function (params) {
                                let result = params[0].name  + '<br/>';
                                params.forEach(function (item) {
                                    result += item.marker + item.seriesName + ': ' + item.value + (item.seriesName === 'session使用率' ? '%' : '个') + '<br/>';
                                });
                                return result;
                                }
                            },
                            toolbox: {
                                feature: {
                                restore: { show: true },
                                saveAsImage: { show: true }
                                }
                            },
                            legend: {
                                data: ['当前session数量', '最大session数量', 'session使用率']
                            },
                            grid: {
                                left: '10%',
                                right: '10%',
                                bottom: '15%'
                            },
                            xAxis: {
                                type: 'category',
                                boundaryGap: false,
                                data: res.data.data.dateList, // 示例时间点
                            },
                            yAxis: [
                                {
                                type: 'value',
                                name: '(个)',
                                position: 'left',
                                axisLabel: {
                                    formatter: '{value}'
                                }
                                },
                                {
                                type: 'value',
                                name: '(%)',
                                position: 'right',
                                axisLabel: {
                                    formatter: '{value}%'
                                }
                                }
                            ],
                            series: [
                                {
                                name: '当前session数量',
                                type: 'line',
                                data: res.data.data.currentSessionList,
                                itemStyle: { color: '#5470C6' },
                                yAxisIndex: 0,
                                smooth:true//显示为平滑的曲线
                                },
                                {
                                name: '最大session数量',
                                type: 'line',
                                data: res.data.data.maxSessionList,
                                itemStyle: { color: '#91CC75' },
                                yAxisIndex: 0,
                                smooth:true//显示为平滑的曲线
                                },
                                {
                                name: 'session使用率',
                                type: 'line',
                                data: res.data.data.maxSessionUsedList,
                                itemStyle: { color: '#FAC858' },
                                yAxisIndex: 1,
                                smooth:true//显示为平滑的曲线
                                }
                            ]
                        };
                        this.sessionChart.setOption(sessionOption);
                        this.$nextTick(() => {
                            this.sessionChart.resize(); // 必须 resize 一次
                        });
                    }
                })
            },

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

echarts的tooltip一直不显示

你遇到的问题是echarts的tooltip不显示，这可能是由于以下几个原因：

1. tooltip的配置错误：请检查你的echarts配置文件中tooltip的配置是否正确，是否设置了正确的位置、内容等。
2. tooltip的显示位置：如果tooltip的显示位置在dialog的外部，可能会被dialog的遮罩层遮挡，导致tooltip不显示。
3. dialog的z-index：如果dialog的z-index小于echarts的容器的z-index，可能会导致tooltip不显示。

解决方法：

1. 检查tooltip的配置文件，确保配置正确。
2. 尝试将tooltip的显示位置调整到dialog的内部。
3. 检查dialog的z-index是否小于echarts的容器的z-index，如果是，尝试将dialog的z-index调整到大于echarts的容器的z-index。

如果你已经检查了这些问题，但是问题仍然存在，可以提供更多的代码和配置信息，我将尽力帮助你解决问题。