echarts通用配置中的tooltip与title的设置

在echarts中，tooltip和title是两个非常重要的配置项，它们可以帮助我们更好地展示数据和信息。

tooltip

tooltip是鼠标悬停在数据项上时出现的提示框，它可以显示数据项的具体信息。

tooltip的通用配置

tooltip的通用配置包括以下几个方面：

• trigger ：触发类型，可以是'item'、'axis'、'none'。
• triggerOn ：触发时机，可以是'mousemove'、'click'、'none'。
• formatter ：格式化函数，可以自定义tooltip的内容。

触发类型trigger

触发类型决定了tooltip的触发方式。

• 'item'：当鼠标悬停在数据项上时触发。
• 'axis'：当鼠标悬停在坐标轴上时触发。
• 'none'：不触发tooltip。

触发时机triggerOn

触发时机决定了tooltip触发的时机。

• 'mousemove'：当鼠标移动时触发。
• 'click'：当鼠标点击时触发。
• 'none'：不触发tooltip。

格式化函数formatter

格式化函数可以自定义tooltip的内容。格式化函数接收两个参数：

• params ：数据项的信息。
• ticket ：tooltip的唯一标识。

我们可以通过以下代码来自定义tooltip的内容：

tooltip: {
    formatter: function (params, ticket) {
        return '数据项名称：' + params.name + '<br>' +
               '数据项值：' + params.value;
    }
}

title

title是图表标题，它可以显示图表的主要内容。

title的通用配置

title的通用配置包括以下几个方面：

• text ：标题文本。
• left ：标题水平位置，可以是'left'、'center'、'right'。
• top ：标题竖直位置，可以是'top'、'middle'、'bottom'。
• padding ：标题内边距。
• itemGap ：标题与副标题之间的间距。
• textStyle ：标题文本样式。

我们可以通过以下代码来自定义title的内容：

title: {
    text: '柱状图',
    left: 'center',
    top: 'top',
    padding: [10, 10, 10, 10],
    itemGap: 10,
    textStyle: {
        fontSize: 18,
        fontWeight: 'bold'
    }
}

结语

tooltip和title是echarts中两个非常重要的配置项，它们可以帮助我们更好地展示数据和信息。通过对这两个配置项的熟练掌握，我们可以创作出更加美观、更加 informative charts。