【ECharts】数据量差距大

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://ligang.blog.csdn.net/article/details/80455216

在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'
    }]
};

echarts-type-value

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

echarts-type-log

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

log

通过数学图例可知，我们不能指定logBase为1。同时，x不能<=1；这里需要说明的是，echarts最新版本[v4.1.0]中，对于0&lt;x&lt;10&lt;x&lt;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轴触发

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

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

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

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

x坐标轴触发

方式二：使用tooltip触发事件

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

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