echarts多条折线图展示不一样的单位变化

最新推荐文章于 2025-07-09 15:42:19 发布

原创最新推荐文章于 2025-07-09 15:42:19 发布 · 4.1k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #vue.js #es6

H5 同时被 2 个专栏收录

10 篇文章

订阅专栏

vue+echarts

7 篇文章

订阅专栏

本文介绍如何在Echarts的多条折线图中，根据数据大小显示不同的单位，如万元、亿元等。通过在tooltip的formatter中进行处理，实现动态单位展示。

部署运行你感兴趣的模型镜像

最近接了个需求：
在多个折线图中要每条数据

一万以下显示（元）
一万以上显示（万元）
一亿显示亿元（亿元）

在tooltip中加上formatter即可

tooltip: {
            trigger: 'axis',
            // formatter: '{a0}: {c0}元<br />{a1}: {c1}元<br />{a2}: {c2}元'
            formatter: function (c) {
              let one = {};
              let two = {};
              let three = {};
              c.forEach((item,index)=>{
                switch (index){
                  case 0:
                    if (item.value >= 100000000) {
                        one.format = '亿元';
                        one.value = item.value/100000000
                    } else if (item.value >= 10000) {
                        one.format = '万元';
                        one.value = item.value/10000
                    } else {
                        one.format = '元';
                        one.value = item.value
                    }
                    one.seriesName = item.seriesName
                    break;
                  case 1:
                     if (item.value >= 100000000) {
                        two.format = '亿元';
                        two.value = item.value/100000000
                    } else if (item.value >= 10000) {
                        two.format = '万元';
                        two.value = item.value/10000
                    } else {
                        two.format = '元';
                        two.value = item.value
                    }
                    two.seriesName = item.seriesName
                    break;
                  case 2:
                     if (item.value >= 100000000) {
                        three.format = '亿元';
                        three.value = item.value/100000000
                    } else if (item.value >= 10000) {
                        three.format = '万元';
                        three.value = item.value/10000
                    } else {
                        three.format = '元';
                        three.value = item.value
                    }
                    three.seriesName = item.seriesName
                    break;
                };
              })
              return one.seriesName+': '+one.value+one.format+'<br />'+two.seriesName+': '+two.value+two.format+'<br />'+three.seriesName+': '+three.value+three.format
                
            },
        },

这个代码还是有问题，但是思路是对的，所以在经过优化与合并之后，最终版长这样

tooltip: {
    trigger: 'axis',
    // formatter: '{a0}: {c0}元<br />{a1}: {c1}元<br />{a2}: {c2}元'
    formatter: function (c) {
      let str = '';
      c.forEach((item)=>{
        let temp = {};
        if (item.value >= 100000000) {
            temp.format = '亿元';
            temp.value = item.value/100000000
        } else if (item.value >= 10000) {
            temp.format = '万元';
            temp.value = item.value/10000
        } else {
            temp.format = '元';
            temp.value = item.value
        }
        temp.seriesName = item.seriesName
        str += temp.seriesName+': '+temp.value+temp.format+'<br />'
      })
      return str
    },
}