在echarts绘图中当x轴表示日期且数据较多时，此时如果按照echarts的默认配置，则会根据空间剩余的大小自动计算最终显示有限的几个不重叠的label
    1、如果必须要显示其实日期和终止日期

    1. xAxis: {
    2.     axisLabel: {
    3.         showMinLabel: true,
    4.         showMaxLabel: true
    5.     }
    6. }

    2、由于画布限制，只显示其实和种植日期，或者再加上中间日期
    interval 属性表示间隔多少项展示一个刻度，直接取一半就会只显示起始日期，终止日期，中间日期

    1. xAxis: {
    2.     axisLabel: {
    3.         showMinLabel: true,
    4.         showMaxLabel: true,
    5.         interval: Math.ceil(data.length / 2)
    6.     }
    7. }

    3、label也可以进行格式化

    1. xAxis: {
    2.     data: data,
    3.     axisLabel: {
    4.         formatter (val, i) {
    5.             if (i === 0 || i === data.length - 1 || i === Math.ceil(data.length / 2)) {
    6.                 return val
    7.             }
    8.             return ''
    9.         }
    10.     }
    11. }
    13. // 将需要的刻度返回，其余的赋值为''
    14. // 同时也可以对最终值进行格式化 如：moment(val).format('YYYY-MM-DD')等

    4、如果要限制起始和终止刻度限制在轴线范围内，不允许超过轴线
    image.png
    此时需要用到echarts的富文本模式rich

    1. //  左右两个位置需要调整，需要定义两个类名
    2. // 这里样式可以用padding， 也可以用宽度和对齐方式来做（我用这种），
    3. const richCss = {
    4.     start: {
    5.         width: 145,
    6.         align: 'right'
    7.     },
    8.     end: {
    9.         width: 145,
    10.         align: 'left'
    11.     }
    12. }

    这样我们就有了两个类名， 再通过第二步的formatter函数的方法将其通过富文本的方式渲染

    1. xAxis: {
    2.     data: data,
    3.     axisLabel: {
    4.         formatter (val, i) {
    5.             if (i === 0) {
    6.                 return `{start| ${val}}`
    7.             } else if (i === data.length - 1) {
    8.                 return `{end| ${val}}`
    9.             }  else if (i === Math.ceil(data.length / 2)) {
    10.                 return val
    11.             }
    12.             return ''
    13.         },
    14.         rich: richCss
    15.     }
    16. }