演示

demo 源码

<template>
<section class="suwis-paths-demo">
  <suwis-path ref="path" :options="options" @lazyLoad="lazyLoad" :from="from" :land="land" :towards="towards" title="来源分析DEMO" :linksTextTop="linksTextTop" :linksTextBottom="linksTextBottom">
  </suwis-path>
</section>
</template>
<script>
import path from 'suwis-paths/components/paths'
export default {
  name: 'demo',
  components: {
    'suwis-path': path
  },
  data() {
    return {
      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',
        children: [{
            name: '智能办公桌',
            pv: '3253',
            uv: '2333',
            children: [{
              name: '办公桌配件',
              pv: '3253',
              uv: '2333'
            }]
          },
          {
            name: '按摩椅',
            pv: '325',
            uv: '223'
          }
        ]
      }, {
        name: '售后支持',
        pv: '13455',
        uv: '2323',
        children: [{
            name: '常见问题',
            pv: '323',
            uv: '133'
          },
          {
            name: '联系我们',
            pv: '235',
            uv: '22'
          }
        ]
      }, {
        name: '合作伙伴',
        pv: '2323',
        uv: '1343',
        children: [{
            name: '材料供应商',
            pv: '743',
            uv: '93'
          },
          {
            name: '加工供应商',
            pv: '532',
            uv: '678'
          }
        ]
      }],
      // 图表配置
      options: {
        horizontalInterval: 88,
        childkey: 'children',
        nodes: {
          width: 180,
          height: 52,
          // 格式化节点标题
          text(data) {
            // TODO: return text
            let item = data.item
            return item.name
          },
          render(data) {
            // TODO: return styleObject
            return {}
          }
        },
        // 路径
        paths: {
          render(opt) {
            // TODO: return styleObject
            return {}
          }
        },
        // 列
        columns: {
          // 头
          headText(data) {
            // TODO: return text
            return ['入口页', '落地页', '会话走向'][data.col]
          },
          // 列底部文字
          footerText(data) {
            // TODO: return text
            let count = ''
            if (data.col == 0) count = data.items.length
            if (data.col > 1) count = data.items.length
            return ['入口页总数', '落地页', '会话走向总数'][data.col] + count
          }
        },
        // 弹出层
        layer: {
          width: 180,
          height: 88,
          autodir: false,
          text(item) {
            // TODO: return styleObject
            return 'PV' + item.pv + '\n' + 'UV' + item.uv
          }
        }
      }
    }
  },
  methods: {
    // 远程加载
    lazyLoad(opt) {
      // TODO: 获取集合
      let subitems = []
      opt.resolve(subitems)
    }
  }
}
</script>
<style>

</style>