echarts 负值到正值的瀑布图

echarts官网给的瀑布图是正值的,然而在实际开发中,会存在负值开始的瀑布图,所以这边动了点小心思,先把最小值给算出来,然后再在y轴显示刻度的时候减去这个最小值,相当于先信用卡给提现了,不管后面是支出还是收入,都不可能出现负值的情况了

计算出y轴的最小值yAxisMin

yAxis: {
  type: 'value',
  axisLabel: {
    formatter: value => value - yAxisMin
  }
}

设置两条x轴,第二条x轴是防止当chart的开始值是负值时,第一条x轴会处在半山腰上(:后面发现,不设置两条x轴,也不会出现x轴卡在半山腰的情况了,按需吧)

xAxis: [
  {
    type: 'category',
    show: false, // x轴隐藏
    data: data || []
  },
  {
    type: 'category',
    data: data || [],
    position: 'bottom'
  }
]

最终得到的效果图为:
效果图
但是目前会有个小缺陷,就是如果是负值开始的话,可能就不会显示0轴了,欢迎提供好的解决方案呢。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts柱状图,如果想要展示负值,可以通过动态调整圆角样式和文字位置来实现。首先,我们可以设置柱状图的圆角样式,当数据为正数时,圆角设置为[15, 15, 0, 0],当数据负数时,圆角设置为[0, 0, 15, 15]。这样可以使柱状图在负值的情况下,底部呈现圆角效果。 其次,为了使负值的文字展示在柱状图下方,我们可以通过设置文字的position属性,当数据为正数时,将文字展示在柱状图的顶部,当数据负数时,将文字展示在柱状图的底部。具体的设置可以通过判断数据的正负性来实现,例如可以使用三元表达式来设置position属性为item > 0 ? 'top':'bottom'。 通过以上的设置,我们可以在echarts柱状图展示负值,并且根据数据的正负性动态调整圆角样式和文字位置。这样可以提高柱状图的可视化效果和数据展示的准确性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [echarts 柱状图渐变色背景](https://download.csdn.net/download/qq_36437172/12418565)[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柱状图负值-动态设置圆角样式](https://blog.csdn.net/EnidChann/article/details/109312962)[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、付费专栏及课程。

余额充值