echart 使用记录

1 折线与Y轴相交

xAxis: {
    boundaryGap: false
}

2 X轴 xAxis 间隔处理 显示三个左边

x轴日期格式为 2022-10-13，将数据处理成时间戳后进行x轴坐标处理

rich 的start和end用来处理x轴的label超出显示问题

vue中的代码:

/**
 * 处理日期
 */
formatDate(val) {
  return dayjs(toNumber(val)).format('YYYY-MM-DD');
},

vm = this

axisLabel: {
  interval: 0,
  rotate: 0,
  showMinLabel: true, // 保留第一个数据label
  showMaxLabel: true, // 保留最后一个数据label
  formatter(val, i) {
    if (i === 0) {
      return `{start|${vm.formatDate(val)}}`;
    }
    if (i === Date.length - 1) {
      return `{end|${vm.formatDate(val)}}`;
    }
    if (i === Math.floor(Date.length / 2)) {
      if (Date.length % 2 === 0) {
        return `{odd|${vm.formatDate(val)}}`;
      } else {
        return vm.formatDate(val);
      }
    }
  },
  rich: {
    start: {
      width: 140,
      align: 'right'
    },
    end: {
      width: 140,
      align: 'left'
    },
    odd: {
      width: 140,
      padding: [0, 24, 0, 0]
    }
  }
},

3 tooltip 背景颜色

tooltip: {
    backgroundColor: 'rgba(0,0,0,0.8)', // 设置背景图片 rgba格式
}

4 y轴title

yAxis: {
    name: '%',
    nameGap: 5,
}