用CSS自定义ECharts Tooltip样式，让你的数据可视化更具吸引力

发布时间：2023-05-20

ECharts是一个基于Canvas的数据可视化库。它支持数十种图表类型和多种数据格式的呈现，其中Tooltip是其中一个重要的组件。Tooltip能够向用户展示更详细的信息，让用户更方便地理解数据。在本文中，我们将探讨如何使用CSS自定义ECharts Tooltip样式，从而让你的数据可视化更具吸引力。

一、自定义Tooltip的外观和位置

ECharts的Tooltip是通过设置echarts.Option.tooltip属性来启用的。虽然ECharts提供了一些基本的外观和位置配置选项，但是我们可以使用CSS定制更多样化的Tooltip样式。例如，我们可以通过下面的代码将Tooltip定位到每个数据点的正上方：

echarts.init(document.getElementById('myChart')).setOption({
    tooltip: {
        position: function (point, params, dom, rect, size) {
            // 加上 size 参数可以自动对超出容器的 tooltip 进行剪裁
            var x = point[0];          
            var y = point[1];
            var width = size.contentSize[0];
            var height = size.contentSize[1];
            // 容器的位置偏移量
            var offetx = 20;
            var offety = 10;
            var xpos = x - width / 2;
            if (xpos < offetx) xpos = offetx;
            else if (xpos + width > rect.width) xpos = rect.width - width;
            var ypos = y - height - offety;
            if (ypos < offety) ypos = y + offety;
            return [xpos, ypos];
        },
        backgroundColor: 'rgba(255,255,255,0.9)',   
        borderColor: '#32A5D2',          
        borderWidth: 1,                  
        textStyle: {                     
            color: '#000'                 
        }
    },
    ...
});

在上面的代码中，我们为Tooltip指定了一个函数作为position属性的值，通过Tooltip显示的点的坐标、组件的参数、Tooltip的dom元素、Tooltip框体的位置及大小等参数，来计算Tooltip实际应该在页面上的位置和大小。同时，我们还使用了backgroundColor、borderColor、borderWidth和textStyle属性来设置Tooltip的背景色、边框颜色、边框宽度和文本颜色。 此外，我们还可以使用:before和:after伪元素来为Tooltip添加箭头效果。下面的代码实现了一个带箭头的Tooltip：

/*css for tooltip*/
.echarts-tooltip {
    position: absolute;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    padding: 8px;
    font-size: 14px;
    background-color: #fff;
    color: #000;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}
.echarts-tooltip:before,.echarts-tooltip:after {
    display: block;
    position: absolute;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    content: "";
    height: 0;
    width: 0;
    right: 15px;
}
.echarts-tooltip:before {
    border-color: transparent transparent #fff transparent;
    bottom: -6px;
}
.echarts-tooltip:after {
    border-color: transparent transparent rgba(0, 0, 0, .5) transparent;
    bottom: -7px;
}
.echarts-tooltip.show-tooltip {
    opacity: 1;
}

在上面的代码中，我们使用了:before和:after伪元素来创建箭头效果，为Tooltip创建了两个CSS类：.echarts-tooltip和.show-tooltip，.show-tooltip类用于将Tooltip在鼠标悬停时呈现。

二、为Tooltip添加背景图片

我们还可以利用CSS添加背景图片为Tooltip增加个性化的外观，下面的代码实现了一个带背景图片的Tooltip：

/*css for tooltip*/
.echarts-tooltip {
    position: absolute;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    font-size: 14px;
    background-repeat: no-repeat; 
    background-size: 100% 100%;   
    padding: 8px 20px;
    opacity: 0;
    transition: opacity .5s ease-in-out;
}
.echarts-tooltip:before,.echarts-tooltip:after {
    display: block;
    position: absolute;
    border-style: solid;
    border-width: 6px 6px 0 6px;
    content: "";
    height: 0;
    width: 0;
    right: 50%;
    margin-right: -6px;
}
.echarts-tooltip:before {
    border-color: #fff transparent transparent transparent;
    top: -6px;
}
.echarts-tooltip:after {
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
    top: -7px;
}
.echarts-tooltip.flag-top:before {
    border-color: transparent transparent #fff transparent;
    bottom: -6px;
    top: auto;
}
.echarts-tooltip.flag-top:after {
    border-color: transparent transparent rgba(0, 0, 0, .5) transparent;
    bottom: -7px;
    top: auto;
}
.echarts-tooltip.show-tooltip {
    opacity: 1;
}
/*add background image*/
.echarts-tooltip.echarts-tooltip-bg {
    background-image:url('data:image/png;base64,iVBORw0KG');
    color:#fff;
}

在上面的代码中，我们在.echarts-tooltip类上指定了background-image属性以添加了一张背景图像。而.echarts-tooltip.echarts-tooltip-bg则是为添加背景图像的Tooltip添加额外的样式。我们还为Tooltip的箭头添加了如上所述的:before和:after伪元素效果。

三、为特定的数据项定制Tooltip

ECharts提供了多种方式来为特定的数据项设置Tooltip的内容。例如，我们可以在echarts.Option.tooltip.formatter函数中编写自定义的文本格式化头文件：

echarts.init(document.getElementById('myChart')).setOption({
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross'
        },
        formatter: function (params) {
            return 'This is a custom tooltip.<br>Name :' + params[0].name + '<br>Value :' + params[0].value;
        },
        textStyle: {
            color: '#000'
        }
    },
    ...
});

在上面的代码中，我们为Tooltip的formatter属性指定了一个函数来编写自定义的文本格式，它将每个参数的名称和值转换为HTML格式的字符串以供显示。此外，我们还设置了axisPointer属性为cross以显示一个交叉的坐标轴浮动提示框。 如果我们想在特定的数据项上显示不同的文本，我们可以在echarts.Option.series中为特定的数据项指定Tooltip的value属性，如下所示：

echarts.init(document.getElementById('myChart')).setOption({
    tooltip: {
        trigger: 'axis'
    },
    series: [ // 通过series设置不同的Tooltip
    {
        name: 'A',
        type: 'line',
        data: [1, 2, 3, 4, 5],
        tooltip: {
            valueSuffix: ' (单位：万）',    // 小提示后缀
            formatter: function (params) {
                return '这是' + params.seriesName + '的提示。<br>时间：' + params.name + '<br>数据：' + params.value;
            }
        }
    },
    {
        name: 'B',
        type: 'line',
        data: [5, 4, 3, 2, 1],
        tooltip: {
            valueSuffix: ' (单位：千）',    // 小提示后缀
            formatter: function (params) {
                return '这是' + params.seriesName + '的提示。<br>时间：' + params.name + '<br>数据：' + params.value;
            }
        }
    }
    ],
    ...
});

在上面的代码中，我们为每个Series（系列）中的数据添加了unit属性和formatter属性。这将在每个数据项的Tooltip中显示一个后缀字符串，并使数据项具有不同的背景颜色和文本格式。

四、总结

在本文中，我们讨论了如何使用CSS自定义ECharts Tooltip的外观和位置，如何添加背景图片，以及如何为特定的数据项定制Tooltip。这些技术能够增强你的数据可视化，让用户更好地理解数据。你可以使用这些方法来自定义你的Tooltip，以更好地展示你的数据。

推荐文章