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 屬性的設置，可以將特定的數據項以分組高亮的樣式呈現，以便提高用戶的識別度。