<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>
echarts(sankey)桑基图
于 2022-09-22 14:48:50 首次发布