Echarts图表中pie类型tooltip中formatter函数传递的参数从哪里来？

最新推荐文章于 2025-03-25 09:37:20 发布

原创最新推荐文章于 2025-03-25 09:37:20 发布

· 6.1k 阅读

15 ·

版权

文章标签：

#vue.js #typescript #html5

本文详细介绍了如何配置Echarts中的Tooltip提示框，并通过具体示例解释了formatter函数中参数的来源。针对数据展示需求，给出了实际使用的代码片段。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近参与一个项目遇到一个问题，这个tooltip提示框信息怎么配？找了好久最终配置成功，分享到这里大家共享一下，能节省不少时间

首先可以看一下系统介绍的文章，里面知识点比较多，也有注释，讲的很全，推荐大家看一下，Echart自定义Tooltip文章链接。

这里我补充一点就是formatter函数中的param参数从哪里来？

直接上代码：下面的data中的数据就是params参数的来源。

tooltip: {
            trigger: 'item',
            formatter:function (parms){
              var str = parms.marker+""+ parms.data.name+"</br>"+
                "金额："+ parms.data.value+"</br>"+
                "占比："+ parms.percent+"%"+"</br>"+
                "笔数："+ parms.data.count;
              return  str ;
            }
          },


series:[
    data:[
                {value: obj.nativeCity,
                  name: obj.nameList[0],
                  itemStyle:{color: "#ff6226"},
                  count:obj.nativeCityNum
                },
                {value: obj.nativeProvince,
                  name: obj.nameList[1],
                  itemStyle:{color:  "#2ca7f9"},
                  count:obj.nativeProvinceNum
                },
                {value: obj.otherProvince,
                  name: obj.nameList[2],
                  itemStyle:{color: "#2cc78f"},
                  count:obj.otherProvinceNum
                }
              ]
]

Over，问题解决。