lp-time-line 时间里程碑

以时间维度，定位的时间线组件。包含

• 里程碑时间线 TimeLine
• 时间范围线 TimeRangeLine

Install

npm install lp-time-line

Usage

import { TimeLine, TimeRangeLine } from "lp-time-line"

只能在React环境使用。

API

TimeLine 组件

| 属性名 | 类型 | 必填 | 默认值 | 备注 | | ----------- | ------------------- | ----- | ------ | ------------------------------------------------------- | | startTime | DateTime String | true | | 时间轴的开始时间。以“-”分隔的时间字符串，如“2020-1-1”。 | | endTime | DateTime String | true | | 时间轴的结束时间。同上。 | | currentTime | DateTime String | false | | 当前时间。同上。 | | data | Array | false | [] | 时间轴上的节点数据。 | | legendData | Array | false | [] | 时间轴下方的图例信息。 |

TimeLineData 类型

| 属性名 | 类型 | 必填 | 默认值 | 备注 | | ---------------- | --------------- | ---- | ------ | ------------------------------------------------------------ | | color | Color String | | | 时间轴上点的颜色值。如“#abcdef”。 | | time | DateTime String | | | 点对应的时间。 | | renderTooltip | Function(item) | | | Tootip的渲染函数，item包含了原始信息，item._isAfterCurrentTime为当前点是否在当前时间后。 | | renderSubContent | Function(item) | | | 点下方文本的渲染函数，item包含了原始信息，item._isAfterCurrentTime为当前点是否在当前时间后。 |

LegendData 类型

| 属性名 | 类型 | 必填 | 默认值 | 备注 | | ------ | ------------ | ---- | ------ | ------------------------------ | | color | Color String | | | 时间轴下方的图例信息点的颜色。 | | text | String | | | 时间轴下方的图例信息点的文本。 |

TimeRangeLine 组件

| 属性名 | 类型 | 必填 | 默认值 | 备注 | | --------- | --------------- | ---- | ------ | ------------------------------------------------------- | | startTime | DateTime String | true | | 时间轴的开始时间。以“-”分隔的时间字符串，如“2020-1-1”。 | | endTime | DateTime String | true | | 时间轴的结束时间。同上。 | | startRangeTime | DateTime String | | | 范围区域的开始时间点。同上。 | | endRangeTime | DateTime String | | | 范围区域的结束时间点。同上。 | | showRangeText | Boolean | | true | 是否显示范围两个点的时间文本。 |

Demo

import React from "react";
import ReactDOM from "react-dom";
import { TimeLine, TimeRangeLine } from "lp-time-line";

const renderSubContent = item => (
  <div
    style={{
      color: item._isAfterCurrentTime
        ? "rgb(215, 216, 217)"
        : "rgba(0, 0, 0, 0.65)"
    }}
  >
    <div>{item.name}</div>
    <div>{item.time}</div>
  </div>
);

const renderTooltip = item => {
  if (item.time > "2020-0-0") {
    return;
  }
  return (
    <div>
      <div>逾期完成：逾期15天</div>
      <div>计划时间：2019.04.22</div>
    </div>
  );
};

ReactDOM.render(
  <React.StrictMode>
    <h1>DEMO</h1>
    <h3>里程碑式</h3>
    <TimeLine
      startTime="2019-4-1"
      endTime="2020-4-1"
      currentTime="2020-2-1"
      data={[
        {
          name: "战役一",
          color: "#6A9BFF",
          time: "2019-5-1",
          renderTooltip,
          renderSubContent
        },
        {
          name: "战役二",
          color: "#35B34A",
          time: "2019-7-1",
          renderTooltip,
          renderSubContent
        },
        {
          name: "战役三",
          color: "#F5A623",
          time: "2020-1-1",
          renderTooltip,
          renderSubContent
        },
        {
          name: "战役四",
          color: "#FF5029",
          time: "2019-11-1",
          renderTooltip,
          renderSubContent
        },
        {
          name: "战役五",
          color: "#D7D8D9",
          time: "2020-3-1",
          renderTooltip,
          renderSubContent
        }
      ]}
      legendData={[
        { color: "#6A9BFF", text: "按计划完成" },
        { color: "#F5A623", text: "逾期完成" },
        { color: "#FF5029", text: "逾期未完成" },
        { color: "#D7D8D9", text: "未来计划" }
      ]}
    />
    <h3>时间范围式</h3>
    <TimeRangeLine
      startTime="2019-4-1"
      endTime="2020-4-1"
      startRangeTime="2019-6-1"
      endRangeTime="2020-1-1"
      showRangeText
    />
  </React.StrictMode>,
  document.getElementById("root")
);