Suwis-paths NPM

智能路径分析图表插件

website: http://npmdoc.suwis.com/suwis-paths/

介绍

一个基于zrender的vue 智能路径分析插件，可用于用户走向分析

示意

Image text

使用

<template lang="html">
  <section id="app" class="cti-flow">
    <div class="data-path">
      <cti-path ref="path"
      :options="options"
      :params="params"
      @lazyLoad="lazyLoad"
      :from="pathData.from"
      :land="pathData.land"
      :towards="pathData.towards"
      :title="pathData.title"
      :linksTextTop="pathData.linksTextTop"
      :linksTextBottom="pathData.linksTextBottom">
      </cti-path>
    </div>
  </section>
</template>

<script type="text/javascript">
import path from 'suwis-paths/components/paths'
let sessions = {
  counts: 0,
  nexts: []
}
export default {
  components: {
    'cti-path': path
  },
  data() {
    return {
      // 图表配置
      options: {
        horizontalInterval: 88,
        childkey: 'item',
        nodes: {
          width: 180,
          height: 52,
          // 格式化节点标题
          text(data) {
            // TODO: return text
            return ''
          },
          render(data) {
            // TODO: return styleObject
            return {}
          }
        },
        // 路径
        paths: {
          render(opt) {
            // TODO: return styleObject
            return {}
          }
        },
        // 列
        columns: {
          // 头
          headText(data) {
            // TODO: return text
            return ''
          },
          // 列底部文字
          footerText(data) {
            // TODO: return text
            return ''
          }
        },
        // 弹出层
        layer: {
          width: 180,
          height: 88,
          autodir: false,
          text(item) {
            // TODO: return styleObject
            return text
          }
        }
      }
    }
  },
  methods: {
    // 远程加载
    lazyLoad(opt) {
      // TODO: 获取集合
      let subitems = [...]
      opt.resolve(subitems)
    }
  }
};
</script>

props

属性	说明	类型	默认值
from	媒体来源	Array	[]
land	落地页	Object	{}
towards	走向（子节点）	Array	[]
options	配置	Object	{}

from 数据结构

[{
  "landpage": "car_eado-plus_wap",
  "mainpg": "car_eado-plus_wap",
  "pg_count": "44",
  "visit": "13023",
  "uv": "12264",
  "landpage_name": "car_eado-plus_wap"
}, {
  "landpage": "home_wap",
  "mainpg": "home_wap",
  "pg_count": "86",
  "visit": "12344",
  "uv": "11666",
  "landpage_name": "首页"
}, {
  "landpage": "car_cs75plus_wap",
  "mainpg": "car_cs75plus_wap",
  "pg_count": "37",
  "visit": "10891",
  "uv": "10475",
  "landpage_name": "car_cs75plus_wap"
}]

land 数据结构

{
  "landpage": "car_cs75plus_wap",
  "mainpg": "car_cs75plus_wap",
  "pg_count": "37",
  "visit": "10891",
  "uv": "10475",
  "landpage_name": "car_cs75plus_wap"
}

towards 数据结构

[{
  "pg": "https://www.xxx.com.cn/",
  "pg_count": "12",
  "visit": "102",
  "uv": "102",
  "subpath": "897c295d89cc35b6bd6789c5f3e1d6fc",
  "rank": "3",
  "pg_name": "首页-PC",
  "main_url": "car_eado-plus_wap^https://www.xxx.com.cn/",
  "item_next": "Y",
  "item": [{
    "pg": "https://www.xxx.com.cn/m/",
    "pg_count": "11",
    "visit": "78",
    "uv": "78",
    "subpath": "0dc1713fe3e2726677637c0949b4febf",
    "rank": "4",
    "pg_name": "首页-WAP",
    "main_url": "car_eado-plus_wap^https://www.xxx.com.cn/",
    "item_next": "Y",
    "item": []
  }, {
    "pg": "https://www.xxx.com.cn/m/car/eado-plus/",
    "pg_count": "6",
    "visit": "7",
    "uv": "7",
    "subpath": "0dc1713fe3e2726677637c0949b4febf",
    "rank": "4",
    "pg_name": "https://www.xxx.com.cn/m/car/eado-plus/",
    "main_url": "car_eado-plus_wap^https://www.xxx.com.cn/",
    "item_next": "Y",
    "item": []
  }]
}]

options

属性	说明	类型	默认值
horizontalInterval	节点间的水平距离	Number	180
maxRows	最多渲染行	Number	12
childkey	子集key,通过此key访问数据结构中的子节点	String	children
renderer	渲染模式	String	canvas
grid.top	网格用来控制整体节点的垂直偏移	Number	5
nodes	节点属性	Object	-
nodes.width	节点宽度	Number	230
nodes.height	节点高度	Number	50
nodes.radius	节点圆角	Number	10
nodes.namekey	节点标题key	String	name
nodes.valkey	节点值	String	value
nodes.text	节点文字	function	{}
nodes.render	自定义节点	function	{}
paths	自定义路径属性	Object	{}
mousewheel	是否开启鼠标滚动	Boolean	false
draggable	是否可拖拽	Boolean	true
scrollbar.speed	滚动速度	Number	5
scrollbar.radius	滚动条圆角	Number	5
scrollbar.height	滚动条高度	Number	5
bezier.opacity	路径透明度	Number	0.6
bezier.hoverOpacity	路径悬浮透明度	Number	0.8
columns.headText	路径悬浮透明度	function	返回字符串
layer.width	悬浮窗宽度	Number	230
layer.height	悬浮窗高度	Number	60
layer.fill	填充色	String	rgba(88, 94, 107, 1)
layer.textFill	文字填充颜色	String	#fff
layer.speed	移动速度	Number	200
layer.offset	偏移量	Number	20
layer.autodir	自动左右转向	Boolean	true
layer.text	显示文本	function	返回字符串