vue柱状图顶部显示文字，添加千分位 - echart图表

如图所示：

代码如下：

<template>
  <div class="ml20 mr20 mb20 colorFOp">
    <div class="head tc mb20 ">测试案例</div>
      <div ref="test" class="testChart"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  data() {
    return {
      myTestChart:{},
    };
  },
  mounted() {
    this.testChart()
    window.onresize = ()=>{ //窗口变化自动重载
      this.myTestChart.resize()
    }
  
  },
  methods: {
    //添加千分位
    formatCurrency(value){ 
      if (value == 0) return 0;
      if(value == ".") return '';
      if(value == "N/A") return 'N/A';
      if (!value) return '';
      let val = Number(value) // 提前保留两位小数
      let intPart = parseInt(val) // 获取整数部分
      let intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断
      let floatPart = '0' // 预定义小数部分
      val = val.toString() // 将number类型转为字符串类型，方便操作
      let value2Array = val.split('.')
      
      if (value2Array.length === 2) { // =2表示数据有小数位
        floatPart = value2Array[1].toString() // 拿到小数部分
        return intPartFormat + '.' + floatPart
      } else {
        return intPartFormat
      }
    },
    testChart(){
      this.myTestChart = echarts.init(this.$refs.test);
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {           
            type: 'shadow'       
          }
        },
        grid: {
          left: '15',
          right: '30',
          bottom: '15',
          top:'15',
          containLabel: true //防止标签溢出
        },
        xAxis: [
          {
            type: 'value',
            splitLine:{ //横线
              show: false
            },
            boundaryGap: ['5%', '5%'],//x轴两边留白，防止遮挡
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
              }
            },
          }
        ],
        yAxis: [
          {
            type: 'category',
            inverse: true,//倒叙
            axisTick:{ //隐藏刻度
              show:false,
            },
            splitLine:{ //竖线
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                type: 'solid',
                color: '#fff',//左边线的颜色
                width:'1'//坐标线的宽度
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff',//坐标值得具体的颜色
              }
            },
            data: Array.from({length:4},(v,k)=>`${k+1}月`)
          }, 
        ],
        series: [{
          type:'bar',
          data: [3322,2336,3388,3399],
          hoverAnimation: true,
          barWidth : 12,//柱图宽度
          itemStyle: {
            barBorderRadius:25, //柱子圆角     
            color: '#06d4e4',                  
          },
          label:{
            normal:{
              formatter:val => {
                return `${this.formatCurrency(val.value)}`
              },
              show:true,
              position: 'right', //定位
              textStyle:{
                fontSize:10,
                color:'#06d4e4'
              }
            }
          }
        }]
      }

      // 使用刚指定的配置项和数据显示图表。
      this.myTestChart.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
  .testChart{
    margin:100px auto;
    width:850px;
    height: 50vh;
  }
  .title{
    font-size: 16px;
    color: #00F8FD;
    line-height: 42px;
  }
</style>