echarts柱状图的数据差距过大,显示太难看,如何解决

您所在的位置:网站首页 echarts柱状图图例不出来的原因 echarts柱状图的数据差距过大,显示太难看,如何解决

echarts柱状图的数据差距过大,显示太难看,如何解决

2023-12-25 11:54| 来源: 网络整理| 查看: 265

如图所示,在echarts图表展示时,会遇到数据量差距过大的情况,出现这种情况后,过小的数据不仅会影响美观性,往往还会影响交互(比如,点击事件等) 

option = {     xAxis: {         type: 'category',         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']     },     yAxis: {         type: 'value'     },     series: [{         data: [1, 20000, 150, 80, 70, 110, 130],         type: 'bar'     }] };  

比如柱形图,当差值过大时会出现一柱擎天的感觉。 

柱状图、折线图之类的可以使用log轴,修改type: 'log'可以解决问题;如果是饼图可以采用minAngle来防止某个值过小导致扇区太小影响交互。

 饼图也会有类似情况

series: [{ type: 'bar', data: [50,60,300000], coordinateSystem: 'polar', name: '年度计划', stack: 'a' }, { type: 'bar', data: [55,80,10], coordinateSystem: 'polar', name: '累计完成', stack: 'a' }],

————》

radiusAxis: { type: 'log', }

 

图表只是直观的对比数据,对于差距过大的数据,本身就应该在图表里反应出来,反应的结果就是一个部分非常小,一个部分非常大。拿饼图来讲,只有2部分,一部分占比99.9999%,另一个占比0.0001%,任意一个图表都会表现出相差过大,如果你调整了显示的比例,那么查看图表的人就会想当然的认为这两个其实相差也不大。所以面对这种情况,要么直接在图表上标注出来,要么在其他位置上标注出来。  

如果是柱状图、折线图之类的,推荐 log 轴(通过 yAxis.type 设置为 'log');如果是饼图,ECharts 可以通过 minAngle 设置最小的扇形角度。 



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3