ECharts折线图设置Y轴label是否显示及自定义X轴label

需求
因为所展现的结果值是整数,而Y轴label随鼠标上下移动时,label会显示小数,所以想把label去掉,同时X轴坐标点对应的label想用自定义的label(数值后加上单位)。
在这里插入图片描述
解决方法
查看ECharts官网API的坐标轴属性设置,可以通过yAxis.axisPointer.label设置实现需求。
:tooltip.axisPointer.type 设置为 ‘cross’ 则默认显示标签,否则默认不显示。
自己的图表设置了tooltip.axisPointer.type 为 ‘cross’,所以需要将label 的show改为false。option设置如下:

color:['#1890ff'],
tooltip:{
    trigger:'axis',
    formatter: function(params){ // 自定义X轴坐标点对应的label 
        return params[0].axisValue +
            "</br><div style='width: 12px; height:12px; border: 1px solid #1890ff; border-radius:6px; background-color: #1890ff;float: left; margin: 4px'></div>" +
            "<div style='float: left'> "+ params[0].seriesName +":"+ params[0].data[1] + "条" +"</div>";
    },
    axisPointer:{
        type:'cross',
        label:{
            background:'#6a7985',
        }
    }
},
		 ...
xAxis:[{
           type:"category",
           // data:_dateArr,
           axisLabel: {
               show: false
           },
           axisTick: {
               show: false
           },
           splitLine: {
               show: false
           },
           axisLine: {
               lineStyle: {
                   color: gridColor
               }
           }
       }],		 
yAxis:[{
          type:'value',
          splitNumber:2,
          minInterval: 1,
          axisLabel: {
              show: false
          },
          axisLine: {
              show: false
          },
          axisTick: {
              show: false
          },
          splitLine: {
              lineStyle: {
                  color: gridColor,
                  type: 'dashed'
              }
          },
          // Y轴上下移动的横线不显示数值
          axisPointer: {
              label: {
                  show: false
              }
          }
      }]

参考:
ECharts官网:https://echarts.baidu.com/option.html#yAxis.axisPointer.label

  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值