echarts 自定义tooltip显示的数据

最新推荐文章于 2024-08-19 18:09:40 发布

古道边.

最新推荐文章于 2024-08-19 18:09:40 发布

阅读量1.2k

点赞数 5

文章标签： echarts 前端 javascript

本文链接：https://blog.csdn.net/qq_61033782/article/details/125779424

版权

这篇博客探讨了在特定情况下图表中的tooltip显示不正确的问题。作者通过分享一段代码展示了如何自定义tooltip的formatter函数，以确保tooltip显示的数据符合预期。代码涉及到tooltip的触发方式、样式设置以及数据格式化，对于前端开发者特别是进行数据可视化工作的人群具有参考价值。

摘要由CSDN通过智能技术生成

针对某种情况下图表tooltip 展示的数据异常及不是我们想要的效果

话不多说，直接上代码：

          tooltip: {
            trigger: 'axis',
            extraCssText:'height:60px;',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            formatter: function(params) {
          　　let result = ''
          　　params.forEach(function (item) {
            　let dotHtml = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:'+item.color+'"></span>'
          　　　　result += `${dotHtml}${item.seriesName}: ${item.data}<br/>`
          　　})
          　　return result
            }
          },

直接cv即刻使用