echarts 折线图提示框颜色修改
时间: 2025-06-11 17:28:37 浏览: 5
### 修改 ECharts 折线图 Tooltip 提示框颜色
在 ECharts 中,可以通过配置 `tooltip` 的样式来改变提示框的颜色。具体来说,在设置 `tooltip` 属性时加入 `backgroundColor` 来指定背景色,并通过 `borderColor` 设置边框颜色[^1]。
下面是一个简单的例子展示如何实现这一点:
```javascript
option = {
tooltip: {
trigger: 'axis',
backgroundColor: '#7cb5ec', // 背景颜色
borderColor: '#4572a7', // 边框颜色
textStyle: { // 文本样式
color: '#ffffff'
},
formatter: function (params) {
let relVal = params[0].name;
relVal += ' 出园统计: ';
for (let i = 0, l = params.length; i < l; i++) {
relVal += '<br/>' + params[i].marker + params[i].seriesName + ': ' + params[i].value;
}
return relVal;
}
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
name: '出园人数',
data: [120, 200, 150, 80, 70, 110, 130],
type: 'line'
}]
};
```
在这个例子中,不仅设置了提示框的背景和边框颜色,还调整了文字颜色以确保良好的对比度。
阅读全文
相关推荐


















