【ECharts】数据量差距大

版权声明：本文为博主原创文章，未经博主允许不得转载。转载请标明出处：http://blog.csdn.net/ligang2585116！ https://blog.csdn.net/ligang2585116/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'
    }]
};

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

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

通过数学图例可知，我们不能指定logBase为1。同时，x不能<=1；这里需要说明的是，echarts最新版本[v4.1.0]中，对于0

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

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

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

方式二：使用tooltip触发事件

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

和触发series获取到的数据一致！！

问题：和原有的tooltip功能冲突，需要有一定的取舍。