echarts柱状图x轴label简写显示全

具体要解决的问题见上图。

本文只讲述要用的的配置项和思路。具体细节不多描述
注：。。。代表和本文无关

app.title = '坐标轴刻度与标签对齐';

option = {
    color: ['#3398DB'],
    tooltip : {。。。 },
    grid: {。。。 },
    xAxis : [
        {
            type : '。。。',
            data : ['Mon...', 'Tue...', 'Wed...', 'Thu...', 'Fri...', 'Sat...', 'Sun...'],
            axisTick: {。。。},
            //给x轴的各个坐标添加事件，详细信息参考echarts文档即可，之后对添加的这个事件进行绑定鼠标事件
            triggerEvent: true  
        }
    ],
    yAxis : [。。。],
    series : [。。。]
};
myChart.on('mouseover', function (params) {
    //params大约包括：componentType,value,event等属性，具体的可以打印出来看一下
            if(params.componentType == "xAxis"){
                switch (params.value) {
                //思路是判断每个坐标的value，然后找到div，插入子元素显示内容，具体样式自行设定，
                //位置有event中的offset属性
                //在插入和删除元素时注意echart生成的dom树结构，它嵌套了3层。
                    case 'Mons...':
                        $("#main").find('div').remove('.tool').append(`<div class="tool" style="position:absolute;left:${params.event.offsetX}px;top:${params.event.offsetY+20}px;width:100px;height:50px">Monsssssss</div>`)
                        break;
                    case 'Tuef...':
                        $("#main").find('div').remove('.tool').append(`<div class="tool" style="position:absolute;left:${params.event.offsetX}px;top:${params.event.offsetY+20}px;width:100px;height:50px">Tueffffff</div>`)
                    default:
                        break;
                }
            }
        });

注：只写了mouseover时的插入元素，记得在mouseleave时要删除掉。