Echarts X軸內容過長自動隱藏，鼠標移動上去顯示全部

使用echarts圖表做頁面展示的時候，當X軸內容過長時，之前一直用的 '\n'  換行(將字符串根據需要分成兩行來展示)，這樣有很大的侷限性（如內容過長的話 分成兩行也放不下，而且也會影響美觀），後來發現可以通過設置自動隱藏,鼠標移動上去顯示全部名稱的方法 來做，效果會更好。

1. 首先在 x軸上添加 triggerEvent: true。如下紅色部分：

xAxis: {
    data: result.nameList,
    silent: false,
    triggerEvent: true,
    axisLine: {
        onZero: true,
        show: true,
        lineStyle: {
            color: '#90979c' // x 軸線最下面的橫座標線的顏色
        }
    },
    splitLine: {show: false},
    splitArea: {show: false},
    axisLabel: {
        interval: 0,//設置橫座標爲斜
        rotate: 30,//文字傾斜角度
        formatter: function (value) {
            if (value.length > 10) {
                value = value.substring(0, 9) + "..";
            }
            return value;
        },
        textStyle: {
            color: '#666',
            fontSize: '12'
        }
    },
},

2. 自定義x軸上顯示的內容長度。如上面代碼段中的藍色部分。

3. 自定義一個 鼠標懸浮事件方法，並調用。

function extensionOne(myChart) {
    var id = document.getElementById("extensionOne");
    //判斷是否創建過div框,如果沒有創建過，則創建。（創建時，默認隱藏）
    if (!id) {
        var div = "<div id = 'extensionOne' sytle=\"display:none\"></div>";
        $('html').append(div);
    }

    var arrow_left = '20px';
    //鼠標懸浮事件
    myChart.on('mouseover', function (params) {
        if (params.componentType != "xAxis") {
            return;
        }

        //設置div框樣式，併爲其填充值。
        $('#extensionOne').css({
            "position": "absolute",
            "color": "#90979c",
            // "border": "solid 0px white",
            "font-family": "Arial",
            "font-size": "14px",
            "padding": "5px",
            "display": "inline"
        }).text(params.value);
        var xx_text = params.event.offsetX - 35;
        arrow_left = xx_text;

        $("#talentDemandDistribution").mousemove(function (event) {
            // console.log("X軸座標：" + event.pageX + " Y軸座標：" + event.pageY);
            var xx = event.pageX - 30;
            var yy = event.pageY + 10;
            $('#extensionOne').css('top', yy).css('left', xx);
        });
    });

    myChart.on('mouseout', function (params) {
        $('#extensionOne').css('display', 'none');
    });
}

{
   ...
   ...
   var chart = echarts.init(document.getElementById('talentDemandDistribution'));
   chart.setOption(option);

   //在echarts 初始化完成後，調用自定義的鼠標懸浮事件方法
   extensionOne(chart);
}

到此結束！