Incubator-echarts: Tooltip not showing after updating from v3.4.0

[Mahan-F]

Tooltip does not show anymore on graphs when data in NULL.

One-line summary [问题简述]

When I was using ecahrts 3.4.0 and I had a graph that was filled with null or undefined. it would show me a tooltip and I used the formatter to make it say N/A when the value is null or undefined.

Today I updated to the latest version (3.7.1) and realized that tooltips dont show anymore so I downgraded to 3.4.0, it was working again. I went up 1 version (3.5.0) and it was broke so its from that version that this happened.

I looked at the documentation again now to see if something is changed but I couldn't find anything.

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 3.5.0
• Browser version [浏览器类型和版本]: Chrome 60
• OS Version [操作系统类型和版本]: Window 10

Expected behaviour [期望结果]

ECharts option [ECharts配置项]

option = {
title: {
        text: '',
        subtext: ''
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        axisPointer: {
            show: true,
            type: 'cross',
            label: {
                show: true
            }
        },
        formatter: function (params) {
            console.log('value is ' + params); //THIS LINE DOES NOT RUN..
            let value = '';
            if(params[0].data === undefined || params[0].data === null) {
                value = 'N/A';
            } else {
                value = (params[0].data).toFixed(2);
            }
            let text = "<span style=\"color:" + params[0].color + "\">\u25CF</span> " + params[0].seriesName + ": " + value;
            return params[0].name + "<br />" + text;
        }
    },
    axisPointer: {
        show: true,
        type: 'line'
    },
    legend: {
        show: false
    },
    toolbox: {
        show: true,
        feature: {
            magicType: {
                show: true,
                title: {
                    line: 'Line',
                    bar: 'Bar'
                },
                type: ['line', 'bar']
            },
            restore: {
                show: true,
                title: "Restore"
            },
            saveAsImage: {
                show: true,
                title: "Save Image"
            }
        }
    },
    calculable: true,
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        data: []
    }],
    yAxis: [{
        type: 'value',
        min: 0,
        max: 20
    }],
    series: [{
        name: 'TPS',
        type: 'line',
        smooth: true,
        itemStyle: {
            normal: {
                areaStyle: {
                    type: 'default'
                }
            }
        },
        data: []
    }]
}

Other comments [其他信息]

What the graph tooltip should look like:

What it looks like now:

[Ovilia]

It behaves like this as I test your code with v3.7.1.

This makes sense since you set the axisPoint.

So is this what you want?

[Mahan-F]

No I want to tooltip to show as well. If you look at my options, I have a formatter that if the params[0].data is NULL or undefined the tooltip should show "N/A" like in the photo that I provided.

[Ovilia]

Did you forget to copy the data of xAxis here?

[Mahan-F]

The data is loaded after the page loads. It is not static.

This is how the data for x and y axis are loaded.

[Mahan-F]

I did some more testing on this issue and I am almost certain that it is a bug.

When the graph is completely full of null or undefined the tooltip does not show. But when the graph has at least 1 value the tooltips show for the null area. Look at my screenshot below.

The parts that say N/A is my formatter code above.

[belvederef]

I have the same problem with the graph visualisation. Copied the structure of the graph (options) from another project, the first shows the tooltip while the second does not. I could not find a solution for displaying it.

[torueck]

I had the same issue with the tooltip not showing up using echarts within a Vue project. After a while I realized that I have to import different components I make use of in the chart. Amongst these is the tooltip component. The following resolved the issue for me:

import ECharts from "vue-echarts";
import "echarts/lib/chart/scatter";
import "echarts/lib/component/dataZoom";
import "echarts/lib/component/tooltip"; // you need to import the tooltip component