版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://ligang.blog.csdn.net/article/details/80455216
代码语言:javascript复制在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<x<10<x<10<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坐标轴的触发事件
代码语言:javascript复制xAxis: {
type: 'category',
triggerEvent: true,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
问题:x轴获取的数据和触发item获取的数据对象不一致,如果需要下钻传递参数可能存在问题。Issue#3750
方式二:使用tooltip触发事件
代码语言:javascript复制tooltip: {
// 默认为item
trigger: 'axis',
// 默认为 mousemove
triggerOn: 'click',
axisPointer: {
type: 'shadow'
},
formatter: (params) => {
// 这里调取相应的方法
console.log(params[0])
}
}
和触发series获取到的数据一致!! 问题:和原有的tooltip功能冲突,需要有一定的取舍。