echarts tooltip formmater

Echarts tooltip formatter is a function used to format the content of the tooltip. It allows users to customize the tooltip content and style according to their needs. The formatter function takes parameters such as params, which contains information about the data point that the tooltip is currently hovering over.

To use the formatter function, you can define it in the tooltip configuration object as shown below:

tooltip: {
    formatter: function (params) {
        // Your custom tooltip content and style here
    }
}

Inside the formatter function, you can use various HTML tags to format the content, such as `<span>`, `<div>`, and `<br>`. You can also use the `params` object to access the data point's values and series information, and use them to customize the tooltip content.

For example, you can format the tooltip to show the series name, x and y values, and a custom icon:

tooltip: {
    formatter: function (params) {
        var icon = '<i class="fa fa-circle" style="color:' + params.color + '"></i>';
        return icon + ' ' + params.seriesName + '<br/>'
            + 'X: ' + params.value[0] + '<br/>'
            + 'Y: ' + params.value[1] + '<br/>';
    }
}