echarts lets both the X-axis label and the pointer on the x-axis display tooltip

Keywords: Attribute

Now there is a requirement on the project that the mouse be moved to the X-axis label to show the total number of labels, and to the pointer to show the fast numbers.
But the official tooltip.trigger is only item, axis and none. Its effect can not meet the requirements of my project.

So I had to look at the api document. First, I had to turn on the trigger switch of the X-axis label. The trigger switch of the X-axis label was turned off by default.

xAxis.triggerEvent boolean
[ default: false ]
Whether the label of coordinate axis responds to and triggers mouse events is not responded by default.
The event parameters are as follows:
{
    // Component type, xAxis, yAxis, radius Axis, angleAxis
    // Each component type has an attribute representing the component's index, such as xAxis, which is xAxis Index.
    componentType: string,
    // Unformatted scale values, click on the scale label to be valid
    value: '',
    // Name of coordinate axis, click on the name of coordinate axis to be valid
    name: ''
}

In xAxis, set the triggerEvent value to true. So the trigger of the X-axis label opens.
Next, add events to it. There are many mouse events in echarts, such as'click','dblclick','mousedown','mousemove','mouseup','mouseover','mouseout'.
I used mousemove.

myChart.on('mousemove', function (params) {
   //Function content
});

paramsContains the following information
{
    // The name of the component to which the graphic element currently clicked belongs.
    // Its values are'series','markLine','markPoint','timeLine', etc.
    componentType: string,
    // Series type. Values may be:'line','bar','pie', etc. It makes sense when componentType is'series'.
    seriesType: string,
    // The index of the series in the incoming option.series. It makes sense when componentType is'series'.
    seriesIndex: number,
    // Series name. It makes sense when componentType is'series'.
    seriesName: string,
    // Data Name, Category Name
    name: string,
    // index of data in the incoming data array
    dataIndex: number,
    // Input raw data item
    data: Object,
    // Charts such as sankey and graph contain both nodeData and edgeData.
    // The value of dataType will be'node'or'edge', indicating whether the current click is on node or edge.
    // There is only one data in most other graphs, and dataType is meaningless.
    dataType: string,
    // Input data values
    value: number|Array
    // The color of data graphics. It makes sense when componentType is'series'.
    color: string
}

In order to distinguish the trigger of the X-axis tag from the trigger of the pointer, we need to judge the values in the params.

myChart.on('mousemove', function (params) {
        if(params.componentType =='xAxis')
        {
            if(params.value=="Class0"){
                isXLabel=true;
                var offsetX =params.event.offsetX+10;
                var offsetY =params.event.offsetY+10;
                if(params.value="Class1"){
                    myChart.dispatchAction({
                        type: 'showTip',
                        seriesIndex: 0,
                        dataIndex: 0,
                        position:[offsetX,offsetY]
                    });

                }

                console.info(params);

            }

        }

    });
     myChart.on('mouseover', function (params) {
       isXLabel=false;

    });

isXLabel is for tiptool to choose which formatter to use

 tooltip: {
            hideDelay:2000,
            formatter: function (a) {
                if(isXLabel){
                    console.info(a);
                    return  "total: "+(parseFloat(data1[a.seriesIndex])+parseFloat(data2[a.seriesIndex])+parseFloat(data3[a.seriesIndex])+parseFloat(data4[a.seriesIndex]));
                }else {
                    return  a.componentSubType+":<br>"+a.name+": "+a.value;
                }

            }

        },

Only one of the Class0 displays is implemented here, and the effect is as follows

This is the end of the course. There are shortcomings. If you set the delay time to 2 seconds, the tooltip will have 2 seconds to disappear. If you don't set the X-axis label, the tooltip will disappear in seconds. If you have a better way, welcome to discuss the message!!!

Posted by daniel_lee_hill on Wed, 09 Jan 2019 20:30:10 -0800