# API
suwis-paths api用法详解
# from 入口来源
此数据为图表的第一列数据，用来展示进入落地页的所有来源,数据格式为一个对象数组
数据结构示例
[{
name: '百度',
pv: '122034',
uv: '12123'
}, {
name: '谷歌',
pv: '365642',
uv: '2323'
}, {
name: '360',
pv: '12232',
uv: '1213'
}]
# land 落地页
落地页为图表中的第二列数据，只包含一个节点，用来展示需要统计的落地页的信息
数据结构示例
{
name: '公司官网',
pv: '54654646',
uv: '3534534'
}
# towards 落地页跳出走向
用于展示，用户进入落地页跳出离开后都走向了哪些页面，便于分析用户的行为轨迹
数据结构示例
[{
name: '产品列表',
pv: '35455',
uv: '4875',
item_next: 'Y', // 是否有下级
children: [{
name: '智能办公桌',
pv: '3253',
uv: '2333'
},
{
name: '按摩椅',
pv: '325',
uv: '223'
}
]
}, {
name: '售后支持',
pv: '13455',
uv: '2323',
item_next: 'Y',
children: [{
name: '常见问题',
pv: '323',
uv: '133'
},
{
name: '联系我们',
pv: '235',
uv: '22'
}
]
}, {
name: '合作伙伴',
pv: '2323',
uv: '1343',
item_next: 'Y',
children: [{
name: '材料供应商',
pv: '743',
uv: '93'
},
{
name: '加工供应商',
pv: '532',
uv: '678'
}
]
}]
# options 图表配置
可对图表颜色、节点大小、节点文字序列化、滚动设置、容器尺寸等配置
数据结构说明
{
// 节点间的水平距离, 默认180
horizontalInterval: 180,
// 图表每列最多渲染行
maxRows: 12,
// 子集key,通过此key访问数据结构中的子节点
childkey: 'children',
// 渲染模式 canvas/svg 建议选择canvas
renderer: 'canvas',
// 网格用来控制整体节点的垂直偏移
grid.top: 5,
// 节点配置
nodes: {
// 节点宽度
width: 230,
// 节点高度
height: 50,
// 节点圆角
radius: 10,
// 节点标题 默认从对象数组中的name属性
namekey: 'name',
// 节点值
valkey: 'value',
// 节点显示文字
text: (data) => {
return data.item.value
},
// 重写节点上的样式
render: (data) => {
// tips 这里返回一个styleObject, 用于覆盖节点样式, styleObject 的属性参考文档下方描述
return {}
}
},
paths 自定义路径属性 Object {}
// 是否开启鼠标滚动
mousewheel: false,
// 是否可拖拽
draggable: true,
// 滚动条配置
scrollbar:{
// 滚动速度
speed: 5,
// 圆角
radius: 5,
// 滚动条高度
height: 5
},
// 节点线条配置
bezier: {
opacity: 0.6,
hoverOpacity: 0.8
},
// 列配置
columns:{
// 每列的头部标题
headText: (data) => {
return data.item.name
},
// 每列的低部标题
footerText: (data) => {
return data.item.name
}
},
// 节点悬浮层配置
layer: {
// 悬浮窗宽度
width: 230,
// 悬浮窗高度
height: 60,
// 背景颜色
fill: rgba(88, 94, 107, 1),
// 文字填充颜色
textFill: #fff,
// 移动速度, 单位毫秒
speed: 200,
// 位置偏移量
offset: 20,
// 自动根据屏幕位置向右侧转向显示
autodir: true,
// 文本格式化函数
text: (data) => {
return data.item.pv + '\n' + data.item.uv
}
}
}
# styleObject 样式对象
用于配置节点样式的对象
数据结构说明
{
// 描边样式。
stroke: '#fff',
// 不透明度。
opacity: 0.8,
// 阴影模糊大小。
shadowBlur: 10,
// 阴影颜色。
shadowColor: '#fff',
// 阴影横向偏移。
shadowOffsetX: 0,
// 阴影纵向偏移。
shadowOffsetY: 0,
// 线宽。
lineWidth: 0,
// 描边粗细不随缩放而改变，false 则会根据缩放同比例缩放描边粗细。
strokeNoScale: false,
// 文字样式，由 fontSize、 fontFamily、 fontStyle、 fontWeight 组成，建议分别设置这几项而非直接设置 font。
font: '黑体 16px',
// 同 CSS font-style。
fontStyle: 'normal'
// 同 CSS font-weight。
fontWeight: 'normal',
// 同 CSS font-size。
fontSize: '16px',
// 同 CSS font-family。
fontFamily: '黑体',
// 文字填充样式。
textFill: '#fff',
// 文字水平对齐方式，可取值：'left'、 'center'、 'right'，默认根据 textPosition 计算。
textAlign: 'left',
// 文字垂直对齐方式，可取值：'top'、 'middle'、 'bottom'，默认根据 textPosition 计算。
textVerticalAlign: 'top',
// 文字内边距，可以是 2 或 [2, 4] 或 [2, 3, 4, 5] 的形式，同 CSS Padding，单位是像素。
textPadding: 2,
// 当文字过长显示不下时，显示省略号表示。
truncate:{
// 包含了 textPadding 的宽度，超出这个范围就裁剪。
outerWidth: 30,
// 包含了 textPadding 的高度，超出这个范围就裁剪。
outerHeight: 30,
// 默认用省略号表示超出部分，也可以对其进行自定义。
ellipsis: '...',
// 如果空间过小，导致省略号也显示不下，但是又不想空着，可能得有个什么标记表示这里是有字符的，就用个 “点”，就是在这个 placeholder 里设置。
placeholder: '内容'
}
}
# lazyLoad 懒加载
当节点的值 item_next = 'Y' 的时候,节点右侧会显示下拉箭头, 点击节点如果节点 有 children 则直接展开显示 children 的值, 否则将会尝试调用 lazyLoad 获取节点的子集
lazyLoad 方法示例
lazyLoad(opt) {
// TODO: 获取集合
// 可在此执行ajax操作
let subitems = [{
name: '远程节点',
pv: '324242',
uv: '2342',
item_next: 'Y'
}]
opt.resolve(subitems)
}
← 演示