vue2 echarts自定义tooltip

### Vue2 ECharts 自定义 Tooltip 实现

在 Vue2 中集成 ECharts 并自定义 `tooltip` 可以通过配置项中的 `tooltip.formatter` 属性来完成。此属性允许开发者指定一个函数用于动态生成提示框的内容。

对于折线图而言，在 `tooltip` 配置中设置 `formatter` 函数可以实现复杂逻辑，比如求和操作：

var myChart = echarts.init(document.getElementById('main'));

option = {
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            let sum = 0;
            params.forEach(item => {
                sum += item.value !== undefined ? parseFloat(item.value) : 0;
            });
            const result = `<div>总和:${sum}</div>`;
            params.forEach(function (item, index) {
                result += `${index === 0 ? '' : '<br/>'}<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:${item.color};"></span>${item.seriesName}:${item.value}`;
            });
            return result;
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: 'Series A',
        data: [120, 132, 101, 134, 90, 230, 210],
        type: 'line'
    }]
};

myChart.setOption(option);

上述代码展示了如何创建带有自定义 `tooltip` 的折线图实例[^1]。当鼠标悬停于某个时间点上时，不仅会展示该时刻各条曲线的具体数值，还会计算这些值的总和并一同呈现给用户。

为了确保 ECharts 图表能够正常工作，初始化部分应当放置在组件生命周期钩子内，例如 `mounted()` 方法之中，以便 DOM 完全加载后再执行图表渲染逻辑[^2]。

另外需要注意的是，在不同的图表类型下 `{a}`, `{b}`, `{c}` 等模板变量所代表的意义有所不同；而在触发方式设为 `'axis'` 时，则可通过像 `{a0}`, `{a1}` 这样的形式访问多组序列的信息[^3]。