在ECharts中，使用tooltip下的formatter动态处理数据，单位换算，添加不同的单位（单位为['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB）

最新推荐文章于 2024-06-05 17:08:34 发布

原创最新推荐文章于 2024-06-05 17:08:34 发布 · 6.7k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#VUE #ECharts

Vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

ECharts

6 篇文章

订阅专栏

本文介绍如何在ECharts的Tooltip中使用自定义函数来格式化显示的数据，并提供了一个具体的实现示例，包括如何处理数值并添加合适的单位。

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

在tooltip下的formatter中可以调用我们自己封装的函数，我们打印出来发现，value其实是所有的信息集合，而我们可以选择自己所需要的数据进行处理。根据后台返回的数据，我们直接在echarts显示层处理数据。

先上代码：

tooltip: {
    trigger: 'axis',
    formatter: function(value){
        //这里的value[0].value就是我需要每次显示在图上的数据
        if (value[0].value <= 0) {
            value[0].value = '0B';
        }
        else{
            var k = 1024;
            var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
            //这里是取自然对数，也就是log（k）（value[0].value），求出以k为底的多少次方是value[0].value
            var c = Math.floor(Math.log(value[0].value) / Math.log(k));
            value[0].value = (value[0].value / Math.pow(k, c)).toPrecision(3) + ' ' + sizes[c];
        }
        //这里的value[0].name就是每次显示的name
        return value[0].name +"<br/>"+"流量为:"+value[0].value;
     }
          }

但其实想要最终的目的是将整个处理数据添加单位的过程封装在一个方法中，在formatter中调用这个函数，

总结一下，考虑代码优化问题，主要有两个方法：

（1）在接收后端数据的时候就调用封装的方法把数据处理完成后再返回给formatter中。

（2）在formatter中调用函数，可以这样写：

var self = this;
//在formatter中调用method里封装的方法
formatter: function(value){
    //其中data_addition_unit为我们自己封装的数据处理方法
    value[0].value = self.data_addition_unit(value[0].value)
    return value[0].name +"<br/>"+"流量为:"+value[0].value;
}

//在data_addition_unit方法中：
methods: {
    data_addition_unit(value){
        if (value <= 0) {
            value = '0B/s';
        }
        else{
            var k = 1024;
            var sizes = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
            var c = Math.floor(Math.log(value) / Math.log(k));
            value = (value / Math.pow(k, c)).toFixed(2) + ' ' + sizes[c] + '/s';
        }
            return value
    },
}