学习echarts折线图tooltip属性中formatter文字设置不同颜色的方法

在 ECharts 中，可以通过 tooltip 的 formatter 属性来自定义提示框中的文本格式。你可以在 formatter 函数中使用富文本标签 并设置 style 属性来改变文本的颜色。

下面是一个简单的例子，展示了如何在 tooltip 的 formatter 中设置不同的文本颜色：

option = {
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            var color = params[0].color; // 获取数据点的颜色
            var res = '<div style="color: ' + color + ';">';
            res += '<strong>' + params[0].seriesName + '</strong><br/>';
            res += '时间: ' + params[0].name + '<br/>';
            res += '数值: ' + params[0].value + '</div>';
            return res;
        }
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        name: '示例数据',
        type: 'line',
        data: [150, 230, 224, 218, 135, 147, 260]
    }]
};

在这个例子中，tooltip 的 formatter 函数使用了 params 参数，它包含了当前触发提示框的数据点信息。我们从 params 中取得数据点的颜色，并将其应用到提示框文本中。这样，数据点的颜色也就成为了提示框中文本的颜色。