echarts折线图tooltip自定义样式
时间: 2023-10-03 10:04:50 浏览: 131
自定义 折线图
5星 · 资源好评率100%
要自定义echarts折线图tooltip的样式,可以使用tooltip的formatter属性和CSS样式来实现。以下是一个示例代码:
```javascript
option = {
tooltip: {
trigger: 'axis',
formatter: function(params) {
var html = '<div class="tooltip">';
html += '<div class="tooltip-header">' + params[0].name + '</div>';
params.forEach(function(item) {
html += '<div class="tooltip-item">';
html += '<div class="tooltip-point" style="background-color:' + item.color + '"></div>';
html += '<div class="tooltip-name">' + item.seriesName + ':</div>';
html += '<div class="tooltip-value">' + item.value + '</div>';
html += '</div>';
});
html += '</div>';
return html;
},
axisPointer: {
type: 'cross'
}
},
// 其他配置项
// ...
}
```
上面代码中,我们使用了tooltip的formatter属性来自定义tooltip的内容。在函数中,我们可以通过params参数获取到当前tooltip中包含的所有数据项,然后根据需要来组装html字符串。在这个例子中,我们使用了一个`<div>`元素来作为tooltip的容器,并且为它添加了一个自定义的CSS类名`tooltip`,以便后面可以通过CSS样式来对tooltip进行样式调整。
接下来,我们在formatter函数中遍历params参数,将每个数据项的名称、数值、颜色等信息组装成一个html字符串,并添加到tooltip容器中。在这个例子中,我们使用了一个`<div>`元素来作为每个数据项的容器,并为它添加了一个自定义的CSS类名`tooltip-item`,以便后面可以通过CSS样式来对每个数据项进行样式调整。
最后,我们在CSS样式中定义了`.tooltip`和`.tooltip-item`两个类的样式,来对tooltip进行样式调整。以下是CSS样式的示例代码:
```css
.tooltip {
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
}
.tooltip-header {
font-weight: bold;
margin-bottom: 5px;
}
.tooltip-item {
margin-bottom: 5px;
}
.tooltip-point {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
margin-right: 5px;
}
.tooltip-name {
display: inline-block;
font-weight: bold;
margin-right: 5px;
}
.tooltip-value {
display: inline-block;
}
```
上面代码中,我们定义了`.tooltip`类的背景色、边框、内边距等样式,以及`.tooltip-header`、`.tooltip-item`、`.tooltip-point`、`.tooltip-name`、`.tooltip-value`等类的其他样式,来对tooltip进行样式调整。其中,`.tooltip-point`类的样式用于设置每个数据项的颜色标识符,`.tooltip-name`类的样式用于设置每个数据项的名称,`.tooltip-value`类的样式用于设置每个数据项的数值。
阅读全文