echarts(sankey)桑基图

<template>
  <div style="width:100%;" v-resize="bodyResize">
    <div  ref='echartsSankeyRef' style="width:100%;height:500px"></div>
  </div>

</template>

<script>
  import echarts from 'echarts'
  import { reactive, ref, toRefs, computed, watch, onMounted } from '@vue/composition-api'

  let option = {
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove'
      // formatter: (params) => {
      //   console.log(params)
      //   let { source, target, value } = params.data
      //   return `${source}-->${target}:${value}`
      // }
    },
    series: {
      type: 'sankey',  // 桑基图 是一种特殊的流图（可以看作是有向无环图）
      layout: 'none',
      orient: 'horizontal', // 布局方向
      left: 0,
      bottom: 0,
      right: 0,
      // 桑基图的高亮状态。
      emphasis: {
        focus: 'adjacency'  // 聚焦关系图中的邻接点和边的图形
      },
      // 描述了每个矩形节点中文本标签的样式。
      label: {
        show: true, // https://echarts.apache.org/zh/option.html#series-sankey.label.show
        position: 'top'
      },
      // 桑基图边的样式
      lineStyle: {
        color: 'red', // 默认 '#314656'
        curveness: 0.5
      },
      // 桑基图节点数据列表。
      data: [
        {
          // 节点名称
          name: 'a',
          // 节点样式
          itemStyle: {
            color: 'rgba(201, 78, 78, 1)'
          }
        },
        {
          name: 'b'
        },
        {
          name: 'a1'
        },
        {
          name: 'a2'
        },
        {
          name: 'b1'
        },
        {
          name: 'c'
        }
      ],
      // 节点间的边。
      links: [
        {
          source: 'a',
          target: 'a1',
          value: 5,
          // a- a1图边样式
          lineStyle: {
            color: '#000000', // 默认 '#314656'
            curveness: 0.5
          }
        },
        {
          source: 'a',
          target: 'a2',
          value: 3
        },
        {
          source: 'b',
          target: 'b1',
          value: 8
        },
        {
          source: 'a',
          target: 'b1',
          value: 3
        },
        {
          source: 'b1',
          target: 'a1',
          value: 1
        },
        {
          source: 'b1',
          target: 'c',
          value: 2
        }
      ]
    }
  }
  export default {
    directives:{
      resize:{
        inserted: (el, binding, vNode) => {
          // 指令的绑定值，是一个function函数
          const callback = binding.value
          // 延时执行函数的毫秒数
          const debounce = binding.arg || 200

          // 禁止执行与事件关联的默认动作
          const options = binding.modifiers || { passive: true }

          let debounceTimeout = null
          const onResize = () => {
            clearTimeout(debounceTimeout)
            debounceTimeout = setTimeout(callback, debounce, options)
          }
          // 监听窗口缩放
          window.addEventListener('customResize', onResize, options)
          window.addEventListener('resize', onResize, options)
          // 存储监听窗口缩放事件的参数，方便在unbind钩子函数中解除事件绑定的时候使用到
          el._onResize = {
            onResize,
            options
          }
        },
        unbind (el, binding) {
          const { onResize, options } = el._onResize;
          window.removeEventListener('customResize', onResize, options)
          window.removeEventListener('resize', onResize, options)
          delete el._onResize
        }
      }
    },
    setup() {
      let echartsSankeyRef = ref(null)
      let echartsSankey = ref(null)
      onMounted(() => {
        console.log(echartsSankeyRef)
        echartsSankey.value = echarts.init(echartsSankeyRef.value)
        echartsSankey.value.setOption(option, true)
      })
      const bodyResize =()=> {
        if (echartsSankey.value) {
          echartsSankey.value.resize()
        }
      }

      return {
        echartsSankeyRef,
        bodyResize
      }
    }
  }
</script>