一、什么是echarttooltip
Echarttooltip作为百度开源的JavaScript图表库echarts的一个组件，是一种用于显示数据提示框的工具，也称作“数据提示框”、“气泡框”、或“信息框”。 用户当鼠标悬停在图表数据上时，echarttooltip会自动弹出，并显示相应的数据信息，帮助用户更好地分析数据，提高使用体验。
二、echarttooltip的源码分析
下面是一个简单的echarttooltip的示例代码：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据
var option = {
title: {
text: 'Echarts入门示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: ["香蕉","苹果","橘子","菠萝","西瓜","葡萄"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
在上述代码中，我们可以看到echarttooltip的具体实现方式：
首先，在图表的配置项option中，我们可以设置tooltip属性，tooltip 属性是一个包含各种设置的对象。在这里，我们使用了默认的tooltip，其显示数据信息的内容为“系列名称/分类名称/数据项名称”及其对应的数值。当用户鼠标移到某个数据点上时，该数据点的信息会在气泡框中显示，并根据用户鼠标的位置位置动态框进行调整。
三、echarttooltip的高级用法
1、自定义tooltip样式
用户可以通过自定义tooltip的样式、内容、位置等属性，来实现更多个性化需求。例如，下面的示例代码中，我们通过设置tooltip的backgroundColor，borderWidth等属性值，实现了自定义tooltip的样式效果：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
// 实现自定义tooltip的样式效果
option = {
series: [
{
name: 'Echarts入门示例',
type: 'pie',
radius: '55%',
center: ['50%', '50%'],
data: [
{value: 335, name: '直接访问'},
{value: 310, name: '邮件营销'},
{value: 234, name: '联盟广告'},
{value: 135, name: '视频广告'},
{value: 1548, name: '搜索引擎'}
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
],
tooltip: {
trigger: 'item',
formatter: '{b}: {c} ({d}%)',
backgroundColor: 'rgba(0, 0, 0, 0.7)',
borderWidth: 0,
textStyle: {
color: '#fff',
fontSize: 12
}
}
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
上述代码中，我们通过 trigger 属性的设置来指定触发类型，"item" 表示针对单个数据项进行鼠标响应；同时通过 formatter 属性的设置来指定tooltip的内容格式。
2、echarttooltip的高级设置
除了常规的tooltip设置之外， echarts还为大家提供了多种高级tooltip功能，从而实现更为个性化强的数据展示效果。例如， 我们可以通过axisPointer属性来实现在数据轴上悬浮时，浮现标线的功能。代码示例如下：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一','周二','周三','周四','周五','周六','周日'],
axisPointer: {
animation: false
}
},
yAxis: {
type: 'value',
axisPointer: {
snap: true
}
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'line',
animation: false,
label: {
backgroundColor: '#6a7985',
fontSize:12
}
}
},
series: [
{
name:'邮件营销',
type:'line',
stack: '总量',
data:[120, 132, 101, 134, 90, 230, 210]
}
]
};
myChart.setOption(option);
在上述代码中，我们通过设置 trigger 属性为 'axis'，表示同时针对多个数据项进行处理；同时通过 axisPointer 属性的设置来实现 “鼠标悬浮至轴上出现浮现标线” 的效果。
3、分组高亮的选取
除了高级设置之外，echarts还为大家提供了方便的分组高亮选取功能，让用户可以轻松实现数据分组的聚焦与比较。代码示例如下：
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
xAxis: {
type: 'category',
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name: '邮件营销'
}, {
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
name: '联盟广告',
emphasis: {
focus: 'series'
}
}, {
data: [320, 332, 301, 334, 390, 330, 320],
type: 'line',
name: '视频广告'
}, {
data: [220, 182, 191, 234, 290, 330, 310],
type: 'line',
name: '直接访问'
}],
tooltip: {
trigger: 'axis'
}
};
myChart.setOption(option);
在上述代码中，我们通过 emphasis 属性的设置，可以将特定的数据项以分组高亮的样式呈现，以便提高用户的识别度。
