visitor-flow

用户流量图组件

Demo

http://eleme.io/visitor-flow/

Installation

npm i visitor-flow -S

Usage

import Vue from 'vue';
import Flow from 'visitor-flow';
import 'visitor-flow/dist/flow.css';

// 1. 当作插件注册
Vue.use(Flow);

// 2. 或者当作组件全局注册
Vue.component(Flow.name, Flow);

// 3. 或者局部注册
new Vue({
  components: [ Flow ]
});

<flow
  :data="data"
  :highlight-data.sync="highlightData"
  @select="handleSelect">
  <select class="sources">
    <option value="">来源</option>
    <option value="">操作系统</option>
    <option value="">地区</option>
    <option value="">社交网络</option>
  </select>
</flow>

Direct include

通过 window.VisitorFlow 获取组件

<link rel="stylesheet" href="待更新/dist/flow.css">
<script src="待更新/dist/flow.js"></script>

API

| 名称 | 类型 | 描述 | 默认值 | |---------------|----------|----------------------------|--------| | data | Object[] | 数据源，数据格式见下表 | | | highlightData | Object[] | 高亮数据源，数据格式见下表 | | | select | Function | 选中某一部分后会触发的事件 | |

Data Format

data

[
  [
    {
      "path": "/test1",
      "value": 250000,
      "to": [
        {
          "path": "/test1",
          "value": 2000
        }
      ]
    }
  ],
  [
    {
      "path": "/test1",
      "value": 100600,
      "outflow": 10000
    }
  ]
]

highlightData

[
  [
    {
      "path": "/test1",
      "value": 250000,
      "to": [
        {
          "path": "/test1",
          "value": 2000
        }
      ]
    }
  ],
  [
    {
      "path": "/test1",
      "value": 100600,
      "outflow": 10000, // 原来的 outflow 值
      "currentOutflow": 4000 // 高亮部分的 outflow
    }
  ]
]

select() 返回值

点击不同部分（outflow/connector/block）不一定返回所有字段，完整的字段如下

{
  "from": "/test1",
  "to": "/test2",
  "fromIndex": 0,
  "toIndex": 1,
  "type": "outflow" // outflow/connector/block
}

Development

依赖 cooking 0.5.x

make dev

Production

make dist

License

ISC