解决 ECharts 类目轴和时间轴刻度标签显示的问题

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

解决 ECharts 类目轴和时间轴刻度标签显示的问题

日常项目中，遇到过好多次关于轴刻度标签显示的问题。以下介绍两种我经常遇到的情况：第一种是类目轴刻度标签内容太多，而ECharts默认规则展示的内容又不符合我们当前要求的情况；第二种是时间轴的默认刻度标签显示的格式不符合我们当前要求的情况。

1.代码展示

可将以下代码复制到ECharts官方网站上编辑。

编辑地址：echarts.apache.org/examples/zh…

// 获取日期
function getNextDate(date, day) {
  let dd = new Date(date);
  dd.setDate(dd.getDate() + day);

  let m = dd.getMonth() + 1;
  let d = dd.getDate();
  return m + '-' + d;
}

// 生成随机数
function getNum(min, max) {
  const num = parseInt(Math.random() * (max - min + 1) + min);
  return Math.floor(num);
}

// 随便一个日期，为了拼对格式
BASE_TIME = '2022-11-29';

seriesData = [];
// Y轴要替换的标签
YTimeList = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'];
// X轴要显示的标签
XTimeList = [  '1-1',  '2-1',  '3-1',  '4-1',  '5-1',  '6-1',  '7-1',  '8-1',  '9-1',  '10-1',  '11-1',  '12-1'];

// 计算出一年的点
let xDate = [];
let xVal = [];
for (let index = 0; index < 365; index++) {
  const aa = getNextDate(new Date(), index - 365);
  const bb = getNum(10, 15);
  xDate.push(aa);
  xVal.push(`${BASE_TIME} ${bb}:00:00`);
}
seriesData.push(xDate);
seriesData.push(xVal);

option = {
  backgroundColor: '#112536',
  color: ['RGBA(51,125,173,0.8)'],
  grid: {
    top: '12%'
  },
  legend: {
    itemWidth: 30,
    itemHeight: 20,
    itemGap: 20,
    icon: 'circle',
    textStyle: {
      color: '#fff',
      fontSize: 20,
      fontFamily: 'siyuan'
    },
    selected: true,
    data: ['平均值']
  },
  xAxis: {
    type: 'category',
    name: '',
    nameTextStyle: {
      color: '#fff',
      fontSize: 20,
      fontFamily: 'siyuan'
    },
    axisLine: {
      show: true,
      lineStyle: {
        color: '#fff',
        width: 2
      }
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      margin: 20,
      color: '#fff',
      fontSize: 20,
      fontFamily: 'siyuan',
      interval: (index, value) => {
        return XTimeList.includes(value);
      }
    },
    data: seriesData[0]
  },
  yAxis: {
    type: 'time',
    min: `${BASE_TIME} 00:00:00`,
    max: `${BASE_TIME} 24:00:01`,
    interval: 3600 * 4 * 1000,
    axisLine: {
      show: false
    },
    name: 'h',
    nameTextStyle: {
      padding: [0, 55, 10, 0],
      color: '#fff',
      fontSize: 20,
      fontFamily: 'siyuan'
    },
    axisTick: {
      show: false
    },
    axisLabel: {
      show: true,
      margin: 20,
      color: '#fff',
      fontSize: 20,
      fontFamily: 'siyuan',
      formatter: function (value, index) {
        return YTimeList[index - 1];
      }
    },
    splitLine: {
      show: true,
      lineStyle: {
        type: 'dashed',
        color: 'RGB(13,46,82)',
        width: 2
      }
    }
  },
  series: [
    {
      type: 'scatter',
      name: '平均值',
      symbolSize: 15,
      itemStyle: {
        borderColor: 'RGB(101,165,188)',
        borderWidth: 1
      },
      data: seriesData[1]
    }
  ]
};

2.解决问题

2.1 针对类目轴刻度标签太多导致显示不全的问题。

我通过使用 axisLabel.interval 属性定义规则，来判断哪些显示哪些不显示。

首先确定想要展示的刻度标签，定义成一个数组。

// X轴要显示的标签
XTimeList = [
  '1-1',
  '2-1',
  '3-1',
  '4-1',
  '5-1',
  '6-1',
  '7-1',
  '8-1',
  '9-1',
  '10-1',
  '11-1',
  '12-1'
];

然后通过 axisLabel.interval 来定义规则进行判断。

  xAxis: {
    ...
    axisLabel: {
      show: true,
      margin: 20,
      color: '#fff',
      fontSize: 20,
      fontFamily: 'siyuan',
      interval: (index, value) => {
        return XTimeList.includes(value);
      }
    },
    ...
  }

2.2 针对时间轴默认刻度标签显示的格式不符合要求的情况。

通过min属性、max属性和 interval 属性来控制坐标轴分割间隔，然后通过 formatter 属性通过索引处理文本显示内容。

首先通过min属性、max属性和 interval 属性的设置获取刻度间隔的个数，代码中设置是6个间隔，也就是需要7个刻度标签。

 yAxis: {
    type: 'time',
    min: `${BASE_TIME} 00:00:00`,
    max: `${BASE_TIME} 24:00:01`,
    interval: 3600 * 4 * 1000,
    ...
  }

然后定义7个刻度标签。

// Y轴要替换的标签 
YTimeList = ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'];

最后通过 formatter 属性通过索引处理文本显示内容。

 yAxis: {
    ...
    axisLabel: {
      show: true,
      margin: 20,
      color: '#fff',
      fontSize: 20,
      fontFamily: 'siyuan',
      formatter: function (value, index) {
        // 5.0以后的版本返回 YTimeList[index - 1] 
        // 5.0之前的版本返回 YTimeList[index]
        return YTimeList[index - 1];
      }
    },
    ...
  }