echarts dataZoom 文本显示不完整

此篇文章记录datazoom文本显示不完整的解决办法

• 显示不完整是这样的
  
• 预期结果是这样的
  
  这里放出关键代码

dataZoom: [
          {
            type: "inside",
            xAxisIndex: [0, 1],
            start: 0,
            end: 100,
          },
          {
            show: true,
            xAxisIndex: [0, 1],
            type: "slider",
            top: "72%",
            // 文本换行是在这里处理
            // this.chartData.xdata[value] 的格式是这样的 "2022-02-23 00:00:00" 所以做如下处理
            labelFormatter: (value) => {
              return this.chartData.xdata[value].split(" ")[0] + '\n' + this.chartData.xdata[value].split(" ")[1]
            },
            start: 0,
            end: 100,
          },
        ],

至此效果达成，特此记录。。。。