vue-brush-timeline

基于 d3-brush 实现的时间轴，可缩放、拖动

截图

示例

在线 demo： brush-timeline online demo

常规用法

尝试一下拉动伸缩滚动条长度，控制时间轴内容的缩放

<template>
  <div>
    <s-brush-timeline
      :data="timelineData"
      render-type="json"
    ></s-brush-timeline>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 注意：JavaScript Date 对象中，月份是从0开始
        timelineData: [
          { date: '2008-8-18', label: '牛市后金融危机' },
          { date: '2015-6-18', label: '牛市' },
          { date: '2018-6-18', label: '震荡市' },
          { date: '2020-6-20', label: '突破3000点' },
          { date: '2020-8-20', label: '3200点或许成为历史最低' },
        ],
      };
    },
  };
</script>

自定义 HTML 模板渲染

<template>
  <div>
    <s-brush-timeline
      :data="timelineData"
      render-type="html"
    ></s-brush-timeline>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 注意：JavaScript Date 对象中，月份是从0开始
        timelineData: [
          {
            content:
              '<div><p class="date">2010-11-18</p><a href="https://github.com/giscafer/sinokit" target="_blank">第一个</a></div>',
          },
          {
            content:
              '<div><p class="date">2011-11-18</p><a href="https://github.com/giscafer/sinokit" target="_blank">新适应症</a></div>',
          },
          {
            content:
              '<div><p class="date">2014-11-18</p><a href="https://github.com/giscafer/sinokit" target="_blank">新冠疫苗方案</a></div>',
          },
          {
            content:
              '<div><p class="date">2013-11-18</p><a href="https://github.com/giscafer/sinokit" target="_blank">包装</a></div>',
          },
          {
            content:
              '<div><p class="date">2014-11-18</p><a href="https://github.com/giscafer/sinokit" target="_blank">审批</a></div>',
          },
          {
            content:
              '<div><p class="date">2015-11-18</p><a href="https://github.com/giscafer/sinokit" target="_blank">IPO</a></div>',
          },
          {
            content:
              '<div><p class="date">2016-11-18</p><a href="https://github.com/giscafer/sinokit" target="_blank">准备上市</a></div>',
          },
          {
            content:
              '<div><p class="date">2017-11-18</p><a href="https://github.com/giscafer/sinokit" target="_blank">上市</a></div>',
          },
        ],
      };
    },
  };
</script>

缩放不换行

限制最大放大倍数，固定间距避免换行

<template>
  <div>
    <s-brush-timeline
      :data="timelineData"
      render-type="json"
      :nowrap="true"
    ></s-brush-timeline>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 注意：JavaScript Date 对象中，月份是从0开始
        timelineData: [
          { date: '2008-8-18', label: '牛市后金融危机' },
          { date: '2015-6-18', label: '牛市' },
          { date: '2015-6-18', label: '牛市' },
          { date: '2015-6-18', label: '牛市' },
          { date: '2018-6-18', label: '震荡市' },
          { date: '2020-6-20', label: '突破3000点' },
          { date: '2020-8-20', label: '3200点或许成为历史最低' },
        ],
      };
    },
  };
</script>

API

Attributes

| 参数 | 说明 | 类型 | 默认值 | | :-------------: | ------------------------------------------------------------------- | :-------: | :-----: | | render-type | 数据渲染方式，有两种：html 、json | String | html | | data | 渲染的时间数据 | Object | - | | height | 滚动条 brush 的高度 | Number | 14 | | margin | 文字和时间轴之间的 margin 距离 | Number | 19 | | orientation | 文字朝向 | String | top | | tooltip | 悬浮在节点上的 tooltip 文字展示 | String | - | | nowrap | 是否换行，本质是限制 brush resize 拉长的限制 | Boolean | false | | brushMaxWidth | Brush 最大宽度（对应控制 timeline 缩小)，当 nowrap 为 true 时才生效 | Number | 500 |

License

MIT