Echarttooltip详解

一、什么是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 属性的设置，可以将特定的数据项以分组高亮的样式呈现，以便提高用户的识别度。