0.2.14 • Published 8 years ago
visitor-flow v0.2.14
visitor-flow
用户流量图组件
Demo
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
0.2.14
8 years ago
0.2.13
8 years ago
0.2.12
8 years ago
0.2.11
8 years ago
0.2.10
8 years ago
0.2.9
8 years ago
0.2.8
8 years ago
0.2.7
8 years ago
0.2.6
8 years ago
0.2.5
8 years ago
0.2.4
8 years ago
0.2.3
8 years ago
0.2.2
8 years ago
0.2.1
8 years ago
0.2.0
8 years ago
0.1.5
8 years ago
0.1.4
8 years ago
0.1.3
8 years ago
0.1.2
8 years ago
0.1.1
8 years ago