Echarts修改正负条形图x轴及标签负值为正值

效果如图:
在这里插入图片描述
我们只需要进行一下操作即可
首先通过xAxis.axisLabel,然后重写他的formatter

xAxis: [
  {
	type: 'value',
    axisLabel: {
   	  formatter: (value) => {
   	    if (value < 0) return -value //这里是针对取负值
        else return value
   	  }
    }
  }
]

我们再找到series.label,然后重写他的formatter

// 这里的label是写在取负数值的series[i]
label: {
      show: true,
      formatter: (value) => {
        return -value.data + 'MB/S' 
   	}
}
  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Echarts条形图中,x轴上的值显示不完时,可以使用newline-echarts.js库来实现文字换行显示。具体的使用方法是在代码中调用newline函数,并传入option、行数(例如3)、以及'xAxis'参数。 如果需要在条形图的左半部分显示负数的数值为正数,可以按以下几个步骤修改。首先,找到xAxis[i].axisLabel,然后重写其formatter属性的值。代码如下所示: ``` xAxis: [ { type: 'value', axisLabel: { formatter: (value) => { // 负数取反,显示的就是正数了 if (value < 0) return -value; else return value; } } } ] ``` 通过这样的修改,x轴上显示为负数的刻度标签将被转换为正数显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [ECharts 统计图中的bar(条形统计)的X轴上的值的显示方法](https://blog.csdn.net/csdn_chenli/article/details/51445341)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Echarts正负条形图将x轴都设置成正数](https://blog.csdn.net/aSmallProgrammer/article/details/103308298)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值