Echarts 柱状图数据大小差距过大,取对数,坐标轴怎么从0开始?

原始数据:最大值和最小值差距过大,导致柱状图太丑;
echarts在线编辑示例:

option = {
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      data: [1, 2, 20, 101, 500, 1024],//第1步,将1换成1.1进行处理;
     
      type: 'bar',
      barMinHeight: '10'
    }
  ]
};

在这里插入图片描述
//第1步,将Y轴坐标取对数

option = {
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'log',//第1步,换成log;
    min: 1,
    logBase: 10,
  },
  series: [
    {
      data: [1, 2, 20, 101, 500, 1024],
     
      type: 'bar',
      barMinHeight: '10'
    }
  ]
};

在这里插入图片描述
第2步,Y轴最小值为1,怎么变成0?Y轴初始值自定义:

option = {
  tooltip: {
    trigger: 'axis',
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'log',
    min: 1,
    logBase: 10,
    axisLabel: {
	        formatter: function (value) {
	            return value === 1 ? 0 : value;//第2步,将y轴最小值1变成从0开始;
            }
		},
  },
  series: [
    {
      //data: [1, 2, 20, 101, 500, 1024],//第1步,将1换成1.1进行处理;
      data: [1.1, 2, 20, 101, 500, 1024],
      type: 'bar',
      barMinHeight: '10'
    }
  ]
};

利用yAxis:axisLabel: formatter: 将Y轴改为从0开始。
在这里插入图片描述

如果要处理特殊点(0/1)等,还有一种复杂设置:
1.先修改数据(比如0–>0.1;1–>1.1等)
2.修改Y轴显示;
3.渲染之前,将数据修改鼠标悬停数据显示。

option = {
  tooltip: {
    trigger: 'axis',
    //第3步,鼠标悬停时,处理数据1.1显示为1;
    formatter:function(params){
		    let html = params[0].name
		    params.forEach((item,index)=>{
		        html+=(`<br/>${item.marker+item.seriesName}: ${item.value===1.1 ? 1 : item.value}`)
		    })
		    return html;
		}

  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'log',
    min: 1,
    logBase: 10,
    axisLabel: {
	        formatter: function (value) {
	            return value === 1 ? 0 : value;//第2步,将y轴最小值1变成从0开始;
            }
		},
  },
  series: [
    {
      //data: [1, 2, 20, 101, 500, 1024],//第1步,将1换成1.1进行处理;
      data: [1.1, 2, 20, 101, 500, 1024],
      type: 'bar',
      barMinHeight: '10'
    }
  ]
};

请添加图片描述
在这里插入图片描述

  • 2
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值