【Echarts示例】类甘特图的时间线图表

示例 类甘特图的时间线图表

const data = [
  { name: '预备阶段', start: 0, end: 2 },
  { name: '战略展开', start: 2, end: 4 },
  { name: '指挥所启动', start: 4, end: 6 },
  { name: '电子对抗准备', start: 5.5, end: 7 },
  { name: '首轮导弹发射', start: 7, end: 8.5 },
  { name: '电子对抗演练', start: 8.5, end: 12 },
  { name: '后勤补给', start: 12, end: 14 },
  { name: '机动转移', start: 14, end: 16 },
  { name: '联合作战协同', start: 16, end: 18 },
  { name: '精确打击演练', start: 18, end: 20 },
  { name: '夜间作战', start: 20, end: 22 },
  { name: '战场侦察', start: 22, end: 23 },
  { name: '演习总结', start: 23, end: 24 }
];

const hours = 24;

const getHourText = (t) => {
  const t1 = Math.floor(t);
  if (t1 === t) {
    return t + ':00';
  } else {
    const t2 = t - t1;
    const t3 = t2 * 60;
    if (t3 >= 10) {
      return t1 + ':' + t3;
    } else {
      return t1 + ':0' + t3;
    }
  }
};

option = {
  tooltip: {
    formatter: (params) => {
      return (
        params.marker +
        params.name +
        ': ' +
        getHourText(params.value[1]) +
        ' - ' +
        getHourText(params.value[2])
      );
    }
  },
  grid: {
    top: 5,
    bottom: 20,
    left: 20,
    right: 20
  },
  xAxis: {
    type: 'value',
    interval: 2,
    minInterval: 2,
    max: hours,
    axisLabel: {
      formatter: (val) => val + ':00'
    }
  },
  yAxis: {
    type: 'category',
    data: data.map((item) => item.name),
    inverse: true,
    axisLine: { show: false },
    axisTick: { show: false },
    axisLabel: { show: false }
  },
  series: [
    {
      type: 'custom',
      renderItem: (params, api) => {
        const categoryIndex = api.value(0);
        const start = api.coord([api.value(1), categoryIndex]);
        const end = api.coord([api.value(2), categoryIndex]);
        const height = api.size([0, 1])[1] * 0.6;
        const rect = {
          type: 'rect',
          shape: {
            x: start[0],
            y: start[1] - height / 2,
            width: end[0] - start[0],
            height: height
          },
          style: api.style({
            fill: '#448aff'
          }),
          emphasis: {
            style: {
              fill: '#409EFF'
            }
          }
        };
        const text = {
          type: 'text',
          style: {
            text: api.value(3),
            textAlign: 'center',
            textVerticalAlign: 'middle',
            fontSize: 12,
            fill: '#0c2c63',
            fontWeight: 'bold'
          },
          position: [(start[0] + end[0]) / 2, start[1] + height - 2]
        };
        return {
          type: 'group',
          children: [rect, text]
        };
      },
      encode: {
        x: [1, 2],
        y: 0
      },
      data: data.map((item, index) => [index, item.start, item.end, item.name])
    }
  ]
};