3.2　提示框

在ECharts中，提示框组件称为tooltip，它的作用是在合适的时机向用户提供相关信息。下面列举一些常用的参数，具体说明如下。

▪ trigger：触发类型，可选的参数有item（图形触发）、axis（坐标轴触发）、none（不触发）。

▪ formatter：提示框浮层内容格式器，一般使用字符串模板，模板变量有{a}, {b}，{c}，{d}，{e}，分别表示系列名、数据名、数据值等。其中变量{a}, {b}, {c}, {d}在不同图表类型下代表的数据含义如下所示。

· 折线（区域）图、柱状（条形）图、K线图：{a}（系列名称），{b}（类目值），{c}（数值），{d}（无）。

· 散点图（气泡）图：{a}（系列名称），{b}（数据名称），{c}（数值数组），{d}（无）。

· 地图：{a}（系列名称），{b}（区域名称），{c}（合并数值），{d}（无）。

· 饼图、仪表盘、漏斗图：{a}（系列名称），{b}（数据项名称），{c}（数值），{d}（百分比）。

注意，在后续具体讲解可视化图时会对这些模板做相应的讲解。

▪ axisPointer：坐标轴指示器配置项，type是该参数的子参数，作用为设置指示器类型，取值可选line（直线指示器），shadow（阴影指示器），cross（十字准星指示器），none（无指示器）。

▪ show：是否显示提示框组件，取值为布尔型数据，默认为true。

关于参数和配置的更多内容可以在官网的文档（配置项）中查看。

我们在3.1节的基础上对tooltip的内容进行修改，代码如下：

tooltip: {
    trigger: 'axis',
    axisPointer: {
        type: 'shadow'
    }
}

修改后的效果如图3-2所示，当移动鼠标时，提示框会显示相关信息。注意这里使用的是阴影效果。

图3-2　提示框设置