echarts折线图tooltip设置样式

动态未结 0 107

小小草 LV1 2023年9月23日 23:40 发表

可以通过 `tooltip` 的 `formatter` 属性来自定义 tooltip 的内容和样式。具体步骤如下： 1. 在 `option` 中设置 `tooltip` 的 `formatter` 属性，该属性为一个函数，用于自定义 tooltip 的内容和样式。 ```js option = { // ... tooltip: { trigger: 'axis', formatter: function(params) { // 自定义 tooltip 的内容和样式 return '

' + params[0].name + '
' + '' + params[0].seriesName + ': ' + '' + params[0].value + '' + '

'; } }, // ... }; ``` 2. 在 `formatter` 函数中，可以使用 HTML 标签和 CSS 样式来自定义 tooltip 的内容和样式。例如，可以使用 `

` 标签来设置 tooltip 的背景色、边框和内边距，使用 `` 标签来设置文字颜色和字体加粗等。在上面的示例中，我们使用了一个白色背景、灰色边框和 10px 内边距的 `

` 标签来包裹 tooltip 的内容，使用黑色字体和粗体的 `` 标签来显示数据名称和数值。注意：如果需要在 tooltip 中显示多个系列的数据，可以在 `formatter` 函数中遍历 `params` 数组，其中每个元素代表一个系列的数据。例如，可以使用 `params[0]` 来获取第一个系列的数据，使用 `params[1]` 来获取第二个系列的数据，以此类推。