详情提示框（tooltip）组件又称气泡提示框组件或弹窗组件，也是一个功能比较强大的组件。 当鼠标滑过图表中的数据标签时，会自动弹出一个小窗体，展现更详细的数据。 有时为了更友好地显示数据内容，还需要对显示的数据内容做格式化处理，或添加自定义内容。
详情提示框组件的属性如表所示。在详情提示框组件中，最为常用的属性是trigger（触发类型）属性。
利用一周内商家的收入数据绘制柱状图，并为图表配置详情提示框组件，如图所示。 由图可知，在图中，当鼠标指针滑过图表中的数据标签时，图表中出现了更为详细的信息。
图例的源代码如下：
<html>
<head>
<meta charset="utf-8">
<!--引入ECharts脚本-->
<script src="js/echarts.js"></script>
</head>
<body>
<!---为ECharts准备一个具备大小（宽高）的DOM-->
<div id="main" style="width: 900px; height: 600px"></div>
<script type="text/javascript">
//基于准备好的DOM，初始化ECharts图表
var myChart = echarts.init(document.getElementById("main"));
//指定图表的配置项和数据
var option = {
tooltip: { //配置提示框组件
trigger: 'axis',
axisPointer:
{
type: 'shadow',
lineStyle: {
color: '#48b', width: 2, type: 'solid'
},
crossStyle: {
color: '#1e90ff', width: 1, type: 'dashed'
},
shadowStyle: {
color: 'rgba(150,150,150,0.2)', width: 'auto', type: 'default'
}
},
showDelay: 0, hideDelay: 0, transitionDuration: 0,
backgroundColor: 'rgba(0,222,0,0.5)',
borderColor: '#f50', borderRadius: 8, borderWidth: 2,
padding: 10,
position: function (p) {
//位置回调
//console.log && console.log(p);
return [p[0] + 10, p[1] - 10];
},
textStyle: {
color: 'blue', decoration: 'none', fontFamily: 'sans-serif',
fontSize: 15, fontStyle: 'normal', fontWeight: 'bold'
},
formatter: function (params, ticket, callback) {
console.log(params)
var res = '详情提示框 : <br/>' + params[0].name;
for (var i = 0, l = params.length; i < l; i++) {
res += '<br/>' + params[i].seriesName + ' : ' + params[i].value;
}
setTimeout(function () {
//仅为了模拟异步回调
callback(ticket, res);
}, 500)
return 'loading';
}
//formatter: "Template formatter: <br/>{b}<br/>{a}:{c}<br/>{a1}:{c1}"
},
toolbox: { //配置工具箱组件
show: true,
feature: {
mark: { show: true }, dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
restore: { show: true }, saveAsImage: { show: true }
}
},
calculable: true,
xAxis: { //配置x轴坐标系
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: { //配置y轴坐标系
type: 'value'
},
series: [ //配置数据系列
{ //设置数据系列1
name: '坐标轴触发1', type: 'bar',
data: [
{ value: 320, extra: 'Hello~' },
332, 301, 334, 390, 330, 320
]
},
{ //设置数据系列2
name: '坐标轴触发2', type: 'bar',
data: [862, 1018, 964, 1026, 1679, 1600, 157]
},
{ //设置数据系列3
name: '数据项触发1', type: 'bar',
tooltip: {
trigger: 'item', backgroundColor: 'black', position: [0, 0],
formatter: "Series formatter: <br/>{a}<br/>{b}:{c}"
},
stack: '数据项',
data: [
120, 132,
{
value: 301, itemStyle: { normal: { color: 'red' } },
tooltip: {
backgroundColor: 'blue',
formatter: "Data formatter: <br/>{a}<br/>{b}:{c}"
}
},
134, 90,
{ value: 230, tooltip: { show: false } },
210
]
},
{ //设置数据系列4
name: '数据项触发2', type: 'bar',
tooltip: {
show: false, trigger: 'item'
},
stack: '数据项', data: [150, 232, 201, 154, 190, 330, 410]
}
]
};
//使用刚指定的配置项和数据显示图表
myChart.setOption(option);
</script>
</body>
</html>
