Echarts:坐标轴全称过长的省略及显示

Echarts中的xAxis.axisLabel.formatter可以定义x轴的刻度标签内容格式，支持字符串模板和回调函数两种形式。

官方示例：

// 使用字符串模板，模板变量为刻度默认标签 {value}
formatter: '{value} kg'

// 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
formatter: function (value, index) {
    // 格式化成月/日，只在第一个刻度显示年份
    var date = new Date(value);
    var texts = [(date.getMonth() + 1), date.getDate()];
    if (index === 0) {
        texts.unshift(date.getYear());
    }
    return texts.join('/');
}

当x轴名称过长，省略写法：

 formatter: (value: any) => {
    return value.length > 5 ? value.slice(0, 3) + '...' : value;
 },

效果：

省略后：

在此希望实现一个效果：鼠标指向x轴，显示省略的全称

在Echarts的xAxis. triggerEvent定义坐标轴的标签是否响应和触发鼠标事件，默认不响应。

当triggerEvent: true时，鼠标指向坐标轴会默认变成手指点击效果，并且在option外面可以通过

   this.chart.on('mouseover', (params:any) => {
            formatter = params.value;
            this.chart.setOption({
                tooltip: {
                    formatter: this.chart,
                    alwaysShowContent: true,
                },
            });
        });

来监听柱状图产生的mouseover事件

params中的参数：

{
    // 组件类型，xAxis, yAxis, radiusAxis, angleAxis
    // 对应组件类型都会有一个属性表示组件的 index，例如 xAxis 就是 xAxisIndex
    componentType: string,
    // 未格式化过的刻度值, 点击刻度标签有效
    value: '',
    // 坐标轴名称, 点击坐标轴名称有效
    name: ''
}

在params.value中打印的是坐标轴的全称，并且定义一个tooltip，将这个全称显示到tooltip中，就实现了坐标轴全称的显示。