echarts 提示框tooltip

Question

echarts 提示框tooltip

formatter可以用来自定义tooltip，那么如何限制formatter回调触发频率呢，mousemove没成功可能我写的有问题

Answer 1

以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

要限制 ECharts 提示框（tooltip）的触发频率，可以使用 throttle 函数来实现。throttle 函数可以确保在一定时间内只执行一次回调函数。这里是一个使用 lodash 库中的 throttle 函数的例子：

首先，确保你已经引入了 lodash 库：

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>

然后，在你的 JavaScript 代码中，使用 throttle 函数来限制 formatter 的触发频率：

// 引入 lodash 的 throttle 函数
const throttle = require('lodash/throttle');

// 初始化 echarts 实例
var myChart = echarts.init(document.getElementById('main'));

// 配置项
var option = {
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            // 在这里编写你的自定义 formatter 逻辑
            return params.name + ': ' + params.value;
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

// 设置图表的配置项
myChart.setOption(option);

// 使用 throttle 限制 formatter 的触发频率
var throttledFormatter = throttle(function (params) {
    console.log('Tooltip triggered:', params);
}, 200); // 200ms 内最多触发一次

// 为 echarts 实例添加事件监听器
myChart.on('mousemove', function (params) {
    throttledFormatter(params);
});

在这个例子中，我们使用了 lodash 的 throttle 函数来限制 formatter 的触发频率。throttle 函数的第一个参数是要节流的函数，第二个参数是节流的时间间隔（以毫秒为单位）。在这个例子中，我们将触发频率限制在每 200 毫秒内最多触发一次。