echarts 叠加柱状图tooltip设置
时间: 2023-08-01 21:06:43 浏览: 137
根据引用\[1\]和引用\[2\]的内容,可以使用tooltip的formatter属性来自定义echarts叠加柱状图的tooltip样式。具体的设置如下:
```javascript
tooltip: {
formatter: (params) => {
let str = '';
str = `
<div class="ehover" style="width:80px;background: #FFFFFF;font-family: Microsoft YaHei;">
<h3 style="height:14px;font-size:14px;font-weight:400;line-height:14px;color:#333333;">
${params\[0\].name}
</h3>
<ul style="margin:0;paddding:0;list-style:none;color: #333333;font-size: 14px;">
`;
for (let i = params.length - 1; i > 0; i--) {
str += `
<li style="display:flex;justify-content:space-between;margin-top:6px;height: 15px;">
<p>${params\[i\].marker} ${params\[i\].seriesName}</p>
<p style="font-weight: 400;">${params\[i\].value}</p>
</li>
`;
}
str += `
</ul>
</div>
`;
return str;
},
padding: 20,
extraCssText: 'box-shadow:-2px 0px 9px 2px rgba(61,126,255,0.45)',
color: '#333333',
}
```
以上代码中,formatter函数用于自定义tooltip的内容和样式。通过遍历params数组,可以获取到每个series的名称、标记和数值,并将其以自定义的样式展示在tooltip中。padding属性用于设置tooltip的内边距,extraCssText属性用于设置tooltip的阴影效果,color属性用于设置文字颜色。
同时,根据引用\[3\]的内容,还可以使用trigger和axisPointer属性来设置tooltip的触发方式和指示器样式。例如,可以将trigger设置为'axis',axisPointer设置为'shadow',以实现在鼠标悬停在柱状图上时显示tooltip,并且tooltip的指示器为阴影效果。
此外,根据引用\[3\]的内容,还可以通过设置xAxis和yAxis属性来配置x轴和y轴的相关设置,通过设置series属性来配置柱状图的数据系列。
综上所述,以上代码提供了一种设置echarts叠加柱状图tooltip的方法。
#### 引用[.reference_title]
- *1* *2* [echarts 堆叠柱状图 tooltip倒序展示数据](https://blog.csdn.net/m0_48571414/article/details/127734130)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [echarts 柱状图 tooltip 加单位](https://blog.csdn.net/qq_43780814/article/details/120762738)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
阅读全文