Vue3 桑基图

效果图：

<template> <v-chart ref="vChartRef" :option="option"></v-chart> </template> <script setup lang="ts"> import { ref, reactive } from "vue"; import VChart from "vue-echarts"; import { use } from "echarts/core"; import { CanvasRenderer } from "echarts/renderers"; import { SankeyChart } from "echarts/charts"; import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent, } from "echarts/components"; import cloneDeep from "lodash/cloneDeep"; use([ DatasetComponent, CanvasRenderer, SankeyChart, GridComponent, TooltipComponent, LegendComponent, ]); const vChartRef = ref<typeof VChart>(); const chartData = ref<any>({ label: [ { name: "a", }, { name: "b", }, { name: "a1", }, { name: "a2", }, { name: "b1", }, { name: "b2", }, ], links: [ { source: "a", target: "a1", value: 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: "b2", value: 2, }, ], }); const seriesItem = ref<any>({ type: "sankey", layout: "none", data: <any>[], links: <any>[], animation: true, animationDuration: 1000, animationEasing: 'cubicOut', // 节点配置 nodeWidth: 20, nodeGap: 8, nodeAlign: 'justify', // 节点对齐方式: 'left', 'right', 'center', 'justify' // 边配置 lineStyle: { color: 'source', // 或 'target', 'gradient' opacity: 0.4, curveness: 0.5, // 边的曲率 width: 'emphasis' // 或具体数值 }, // 节点标签 label: { show: true, position: 'right', // 'left', 'right', 'top', 'bottom', 'inside' color: '#333', fontSize: 12, fontWeight: 'normal', overflow: 'truncate' // 文本溢出处理 }, // 节点标签高亮 labelLayout: { hideOverlap: true, // 隐藏重叠标签 moveOverlap: 'shiftY' // 移动重叠标签 }, // 高亮状态 emphasis: { focus: 'adjacency', // 高亮相邻节点和边 blurScope: 'coordinateSystem' // 淡化范围 }, // 选中状态 select: { disabled: false // 是否禁用选中 }, // 节点高亮样式 emphasisNode: { label: { show: true, color: '#000', fontSize: 14, fontWeight: 'bold' } }, // 边高亮样式 emphasisLineStyle: { opacity: 0.8, width: 2 }, // 渐变色配置 // color: [ // '#5470c6', // '#91cc75', // '#fac858', // '#ee6666', // '#73c0de', // '#3ba272', // '#fc8452', // '#9a60b4', // '#ea7ccc' // ], // 数据排序 orient: 'horizontal', // 'vertical' // 拖拽配置 draggable: true, // 是否可拖拽 // 节点层级配置 levels: [ { depth: 0, itemStyle: { color: '#fbb4ae' }, label: { color: '#000' } }, { depth: 1, itemStyle: { color: '#b3cde3' } }, { depth: 2, itemStyle: { color: '#ccebc5' } } ] }); const getSeries = () => { let series: any = []; const values = chartData.value; if (values.label === undefined || values.links === undefined) { return; } //系列模板 let item: any = cloneDeep(seriesItem.value); item.data = values.label; item.links = values.links; series = item; return series; }; const option = reactive({ // 标题配置 title: { show: true, text: '桑基图', left: 'center', textStyle: { fontSize: 16, fontWeight: 'bold' } }, // 提示框 tooltip: { show: true, trigger: 'item', triggerOn: 'mousemove', formatter: (params: any) => { if (params.dataType === 'node') { return `${params.name}<br/>总量: ${params.value || 0}`; } else if (params.dataType === 'edge') { return `${params.data.source} → ${params.data.target}<br/>流量: ${params.data.value}`; } return ''; } }, // 图例 legend: { show: true, type: 'scroll', // 可滚动 orient: 'horizontal', left: 'center', top: 'bottom' }, // 网格配置 grid: { show: false, left: '10%', right: '10%', top: '10%', bottom: '15%' }, series: getSeries(), }) </script>