【ECharts】数据量差距大

编程入门 行业动态 更新时间:2024-10-10 06:19:51

【ECharts】数据量<a href=https://www.elefans.com/category/jswz/34/1759201.html style=差距大"/>

【ECharts】数据量差距大

在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来防止某个值过小导致扇区太小影响交互。Issue#6767

仔细查看,会发现上图中Mon的数据为1,但是渲染出来的为0。究其原因,是因为log轴的问题~

通过数学图例可知,我们不能指定logBase为1。同时,x不能<=1;这里需要说明的是,echarts最新版本[v4.1.0]中,对于 0 &lt; x &lt; 1 0&lt;x&lt;1 0<x<1做了处理,会按照原始值渲染;但是对于 x = 0 ( 负 无 穷 ) x=0(负无穷) x=0(负无穷)或 x = 1 ( 零 ) x=1(零) x=1(零)时,仍然会有问题!

关于存在数据为0的情况,Math.log(0)-Infinity,官方Issue中给出的建议是修改为一个很小的数字,比如0.01 Issue3161

综上所述,我们不能使用log轴处理,只能使用value轴,然后通过其他方式解决交互!!


上述数据为正常触发series获取的数据,为做对比使用

方式一:增加x坐标轴的触发事件

xAxis: {type: 'category',triggerEvent: true,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},

问题:x轴获取的数据和触发item获取的数据对象不一致,如果需要下钻传递参数可能存在问题。Issue#3750

方式二:使用tooltip触发事件

tooltip: {// 默认为itemtrigger: 'axis',// 默认为 mousemove    triggerOn: 'click',axisPointer: {type: 'shadow'},formatter: (params) => {// 这里调取相应的方法console.log(params[0])}
}

和触发series获取到的数据一致!!
问题:和原有的tooltip功能冲突,需要有一定的取舍。

更多推荐

【ECharts】数据量差距大

本文发布于:2024-02-13 06:22:04,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1757827.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:差距   数据   ECharts

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!