echarts时间轴折线图

折线图常用配置项，时间轴补齐。

效果及功能

画板 629.png

配置项

网格gird;
图例legend
横轴xAxis：时间轴；自定义日期格式、名称、名称大小、距横轴距离、颜色；
纵轴yAxis：数值轴；自定义名称、名称大小、距横轴距离、颜色；
提示框tooltip；
折线series-line；

配置项

网格grid

常见的现象：实例渲染后留白太多，距离容器四周有一定距离，通过grid配置项可以设置。

grid: {
  top: 24, // grid 组件离容器上侧的距离。
  right: 16, // grid 组件离容器右侧的距离。
},

图例选项

legend: {
  right: 300,
  top: 8,
  data: [{
    name: '新增设备数',
    icon: 'rect',
  },
  {
    name: '新提交点位数',
    icon: 'rect',
  }],
  itemHeight: 3, // 图例粗细
},

时间轴 xAxis

如果使用formatter配置项，时间格式最好是格林威治时间数值，就是毫秒的那个时间。感觉这样会更好处理一些。

xAxis: {
  type: 'time', // 时间轴
  splitLine: { show: true }, // 坐标轴在grid区域中的分割线
  axisLabel: { // 坐标轴刻度相关设置
    showMaxLabel: true, // 是否显示最大tick的label
    formatter: '{MM}/{dd}', // 刻度标签的内容格式器，字符串模板，显示日期。
  },
  name: '日期', // 坐标轴名称
  nameLocation: 'center', // 坐标轴名称显示位置
  nameTextStyle: { // 坐标轴名称文字样式
    padding: 16,
    color: '#141414',
    fontSize: 14,
  },
},

数值轴 yAxis

配置项和上面一样的。

yAxis: {
  type: 'value',
  name: this.echartsYAxis,
  nameLocation: 'center',
  nameTextStyle: {
    padding: 24,
    color: '#141414',
    fontSize: 14,
  },
},

提示框 tooltip

tooltip: {
  show: true,
  trigger: 'axis',
  axisPointer: {
    // 设置坐标轴指示器的文本标签。
    label: { 
      formatter(params) {
        const date = new Date(params.value);
        const day = date.toLocaleDateString();
        return day;
      },
    },
  },
},

折线 series-line

时间轴的数据格式是一个二维数组，格式[[time, value], [time, value]]

series: [
  {
    type: 'line', // 折线
    name: '今日完成数', // 系列名称，用于tooltip显示
    symbol: 'none', // 标记图形，none标识不显示
    itemStyle: { // 图形样式，可以控制tooltip中圆点颜色
      color: '#47cbcb',
    },
    lineStyle: { // 线条样式
      color: '#47cbcb',
    },
    areaStyle: { // 区域填充样式
      color: '#cbefef',
    }, // 面积图
    data: echartsData,
  },
],

时间轴补齐

通常后端返回的时间是有效数据，也就是当天数据不为0。时间轴必须是连续的时序数据，通过date-fns三方库补全时间。

逻辑：根据起始和结束日期，生成中间日期。在后端返回数据中，如果能找到相同日期，则保存，找不到补零。

import { eachDayOfInterval, format, subDays, subWeeks, parse } from 'date-fns';

const echartsData = eachDayOfInterval({
  start: parse(this.date[0], 'yyyy-MM-dd', new Date()),
  end: parse(this.date[1], 'yyyy-MM-dd', new Date()),
}).map((x) => {
  const time = x.getTime();

  // 如果effectDateList中能找到，将数量填入。否则表示当前施工无进度补0。
  const dayData = effectDateList.find((y) => parse(y.date, 'yyyy-MM-dd', new Date()).getTime() === time);
  if (dayData) {
    return [time, dayData.num];
  }
  return [time, 0];
});

容器尺寸发生变化，手动调整图表尺寸

出现场景：

用户放缩页面大小；
F12打开控制器；

上述两种场景都会影响容器尺寸，所以实现逻辑：监听容器尺寸变化new ResizeObserver()，发生变化时手动调整图表尺寸。

new ResizeObserve(callback)创建一个新的ResizeObserver对象，监听Element尺寸变化。每当监听元素尺寸变化时调用callback函数。

// 移除监听
beforeDestroy() {
  this.resizeObserver.disconnect();
},

methods: {
  initCharts() {
    ...
    ...
    this.echartsIns.setOption(option);
    
    // 在实例化之后监听容器尺寸变化
    this.resizeObserver = new ResizeObserver(() => this.echartsIns?.resize());
    this.resizeObserver.observe(dom);
  }
}

已解决问题

echarts的画布超过容器大小，解决的办法是放到了一个定时器中执行初始化的逻辑。大概意思是渲染时dom可能没加载（生命周期），放到一个定时器中最后来执行。

遗留问题

重新刷新图表的时候，控制台会报这个警告，上网查了一下说要销毁重绘，还没试过。

echarts折线图（resize手动调整尺寸、补齐时间）