柱形图近似取值echarts 柱状配置项内容和展示

y轴对于数据范围相对集中的可以按比例取值,对于数据分布不集中且差距很大导致柱子高度相差悬殊的情况,可以近似取值

配置项如下
      function valFomat(val) {
    // body...
    if (val < 10) {
        return val * 2000
    } else if (val < 100) {
        return 20000 + (val - 10) * 200
        return val * 100
    } else if (val < 1000) {
        return 40000 + (val - 100) * 20
    } else if (val < 10000) {
        return 60000 + (val - 1000) * 2
    } else if (val < 100000) {
        return 80000 + (val - 10000) / 5
    }
}

var arr = [1200, 8, 356, 76666, 25647, 55, 6375]
var option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'item',
        axisPointer: { // 坐标轴指示器,坐标轴触发有效
            type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisTick: {
            alignWithLabel: true
        }
    }],
    yAxis: [{
        type: 'value',
        splitNumber: '6',
        min: 0,
        max: 100000,
        axisLabel: {
            formatter(value, index) {
                if (index === 0) {
                    return 0
                } else if (index === 1) {
                    return 10
                } else if (index === 2) {
                    return 100
                } else if (index === 3) {
                    return 1000
                } else if (index === 4) {
                    return 10000
                } else if (index === 5) {
                    return 100000
                } else {
                    return ''
                }
            }
        }
    }],
    series: [{
        type: 'bar',
        barWidth: '30%',
        data: [{
            value: valFomat(arr[0]),
            tooltip: {
                formatter(param) {
                    return arr[0]
                }
            }
        }, {
            value: valFomat(arr[1]),
            tooltip: {
                formatter(param) {
                    return arr[1]
                }
            }
        }, {
            value: valFomat(arr[2]),
            tooltip: {
                formatter(param) {
                    return arr[2]
                }
            }
        }, {
            value: valFomat(arr[3]),
            tooltip: {
                formatter(param) {
                    return arr[3]
                }
            }
        }, {
            value: valFomat(arr[4]),
            tooltip: {
                formatter(param) {
                    return arr[4]
                }
            }
        }, {
            value: valFomat(arr[5]),
            tooltip: {
                formatter(param) {
                    return arr[5]
                }
            }
        }, {
            value: valFomat(arr[6]),
            tooltip: {
                formatter(param) {
                    return arr[6]
                }
            }
        }]
    }]
};
myChart.setOption(option)
    
截图如下