echarts中y轴刻度是千万用K,M表示,自定义tooltip格式

echarts中y轴刻度是千万用K,M表示,自定义tooltip格式

一、y轴刻度简化问题

yAxis: {
    type: 'value',
    axisLine: {
        //y轴
        show: false,
    },
    axisTick: {
        //y轴刻度线
        show: false,
    },
    axisLabel: {
        color: '#444343',
        formatter: function (value, index) {
            var value
            if (value >= 1000 && value < 10000) {
                value = value / 1000 + 'k'
            } else if (value >= 10000) {
                value = value / 10000 + 'M'
            } else if (value < 1000) {
                value = value
            }
            return value
        },
    },
},

二、自定义tooltip

tooltip: {
   trigger: 'axis',
   backgroundColor: '#fff', // 提示框背景
   formatter: params => {
       return `
  <div style="border:0;color:#666;text-align: left;width:150px">
     <p style="color:#000"> ${params[0].axisValue}</p>
     <div class="flex justify-content-space-between">
         <div>
             <i class="dot" style="background: ${
                 params[0].color
             };display: inline-block;width: 8px; height: 8px;border-radius: 50%;"></i>
              <span> ${params[0].seriesName}:
              ${(function () {
                  if (params[0].data >= 1000 && params[0].data < 10000) {
                      return params[0].data / 1000 + 'k'
                  } else if (params[0].data >= 10000) {
                      return params[0].data / 10000 + 'M'
                  } else if (params[0].data < 1000) {
                      return params[0].data
                  }
              })()}
</span>
     </div>
     </div>
   
  </div>`
   },
   axisPointer: {
       type: 'shadow',
   },
},
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值