<template>
  <div>
    <tiny-sankey :options="options"></tiny-sankey>
  </div>
</template>

<script lang="jsx">
import { TinyHuichartsSankey } from '@opentiny/vue-huicharts'

export default {
  components: {
    TinySankey: TinyHuichartsSankey
  },
  data() {
    return {
      options: {
        // 页面节点是否可被拖动，布尔值，默认值为 true
        draggable: false,

        // widthSpace, 自定义节点矩形宽度及每列间距，默认 [10, 30]
        widthSpace: [10, 30],
        // value: 传递的数据值，与连接带的高度大小正相关
        sortType: 'unset', // 设置数据的排序方式 ascend decline
        emptyStatus: 'node', // 空节点的展示状态 churnBar
        label: {
          show: true,
          textArrange: 'horizontal', // 设置名称和数值的排列方向 vertical
          overHide: false,
          rich: {
            name: {
              fontSize: 12
            },
            value: {
              fontSize: 12
            }
          }
        },
        data: {
          nodes: [
            { name: '首页', value: 100000 },
            { name: '列表页 a', value: 20000 },
            { name: '列表页 b', value: 80000 },
            { name: '内容页 a-1', value: 10000 },
            { name: '内容页 a-2', value: 10000 },
            { name: '内容页 b-1', value: 60000 },
            { name: '内容页 b-2', value: 20000 }
          ],
          links: [
            { source: '首页', target: '列表页 a', value: 0.5 },
            { source: '首页', target: '列表页 b', value: 0.5 },
            { source: '列表页 a', target: '内容页 a-1', value: 0.1 },
            { source: '列表页 a', target: '内容页 a-2', value: 0.4 },
            { source: '列表页 b', target: '内容页 b-1', value: 0.2 },
            { source: '列表页 b', target: '内容页 b-2', value: 0.3 }
          ]
        }
      }
    }
  }
}
</script>
