echart 自定义鼠标悬停toolTip

最新推荐文章于 2024-10-15 11:09:22 发布

原创最新推荐文章于 2024-10-15 11:09:22 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

element 专栏收录该内容

6 篇文章

订阅专栏

该博客介绍了如何在ECharts图表的tooltip属性中使用自定义formatter函数，根据计划产值和实际完成产值计算并显示完成率，当值为0时特别标记。

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

在option的tooltip属性中自定义

tooltip: {
	 trigger: 'axis',
	 axisPointer: {type: 'shadow'},
	 //数据格式
     formatter: function (params) {
       if(params[0].data == 0||params[1].data == 0){
         var display = params[0].axisValue + '<br>计划产值：' + params[0].data + '<br>实际完成产值：' + params[1].data + '<br>完成率：0%'
         return display
       }else{
         var display = params[0].axisValue + '<br>计划产值：' + params[0].data + '<br>实际完成产值：' + params[1].data + '<br>完成率：' +((params[1].data/params[0].data) * 100).toFixed(2)  + '%'
         return display
       }
     }
},