echart自定义tooltip文字

最新推荐文章于 2024-08-19 18:09:40 发布

juliotang

最新推荐文章于 2024-08-19 18:09:40 发布

阅读量4.1k

点赞数 1

分类专栏： vue 文章标签： javascript 可视化 css

本文链接：https://blog.csdn.net/juliotang/article/details/112470612

版权

本文详述了如何在echart中自定义tooltip的文字，包括默认文字、字符串模板、回调函数和html片段设置的方式。回调函数允许根据自定义逻辑显示内容，而html片段设置则能实现更复杂的展示效果，使tooltip的呈现更加灵活丰富。

摘要由CSDN通过智能技术生成

echart是流行的可视化工具，应用echart可以画出很多想象不到的炫目canvas效果。笔者作为前端工程师长期从事大数据可视化项目，对echart也有深度应用。再此前文章中也多次讨论过echart的各种应用场景，本文将针对echart当中的tooltip文字做全面的表述。
echart中的tooltip是在canvas上的悬停效果的设置，位置在option下的一个属性：

let option = {
   
...
	tooltip: {
   
		...
	}
...
}

其中的基本样式和字体、背景等可以参考官网手册，很简单。本文主要讨论tooltip的文字设置方式。熟悉echart的朋友们肯定都对以下几种方式（除了第4种）都非常熟悉了：

在tooltip中不设置文字显示方式，直接用tooltip默认文字
通过字符串模板设置的方式
通过回调函数设置的方式
html片段设置的方式

本文将针对一个实例简述前三种方式以及第四种容易被忽略或不了解方式进行描述。详细代码读者可以到我的git项目查看具体代码：

link

本项目是笔者参考具体工作中的一个应用来复制的，也是在这个应用中运用到了html设置tooltip的方式。这里代码很简单，是一个echart桑基图，业务逻辑已隐去，我们要看的就是悬停后的tooltip显示效果。

tooltip默认文字

在option.js中已针对tooltip进行了基本字体及背景等样式设置，就可以进行使用了。首先不设置具体tooltip文字回显方式，echart会采用其默认的方式回显。如下代码注释了三种tooltip文字显示方法，只采用默认显示

draw () {
   
  // this.templateTooltip() // 模板tooltip
  // this.customTooltip() // 自定义tooltip
  // this.enrichTooltip() // html tooltip
  this.$nextTick(() => {
   
    let mySankey = echarts.