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 = "
"; $('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);
}

到此结束!

你可能感兴趣的:(Front-end,Technology,Echarts,echarts,X轴)