The Calibration of histogram in echarts

want to implement a bar chart that represents the value of the range

the following is the code for option

option = {
    color: ["-sharp3398DB"],
    tooltip : {
        trigger: "axis",
        axisPointer : {            // 
            type : "shadow"        // :"line" | "shadow"
        }
    },
    grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true
    },
    xAxis : [
        {
            type : "category",
            data : [ "10", "20", "30", "40", "50", "60"],
            axisLabel:{
                align:"left",
                width:"100%"
            },
            offset:10,
            axisTick:{
                alignWithLabel:false
            }
        }
    ],
    yAxis : [
        {
            type : "value"
        }
    ],
    series : [
        {
            name:"",
            type:"bar",
            barWidth: "60%",
            data:[10, 52, 200, 334, 390, 330, 220],
            barWidth:"100%"
        }
    ]
};



clipboard.png
want to scale the text (10 20 30. Move directly below the scale indicated by the arrow, what to do

Feb.28,2021

you can

set xAxis.axisTick.alignWithLabel to true .
xAxis: [{
    axisTick: {
        alignWithLabel: true //  boundaryGap  true 
    }
}]

Echarts official website description


Hello, have you solved the problem? have you encountered the same problem

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e7fab5-a79.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e7fab5-a79.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?