桑吉图

如图：

image.png
鼠标悬浮

1.echarts 下载

npm install echarts --save

2.main.js引入 echarts

import echarts from 'echarts'
Vue.prototype.$echarts = echarts

3.页面代码：

<template>
  <div>
     <div style="width: 300px;height: 300px;" id="chart"></div>
  </div>
</template>
<script>
    export default {
        name: '',
        data() {
            return {
            }
        },
        created() {
            this.$nextTick(() => {
                let sangjiOption = {
                    label:{
                        color: '#fff',
                    },
                    //悬浮显示
                    tooltip: {
                        trigger: 'item',
                        triggerOn: 'mousemove'
                    },
                    series: {
                        type: 'sankey',
                        left:10,
                        right:20,
                        bottom:0,
                     //   控制页面显示/隐藏 A1
                     /*   label:{
                            show:false
                        },*/
                        layout:'none',
                        focusNodeAdjacency: 'allEdges',
                        data: [],
                        links: [],
                        itemStyle: {
                            normal: {
                                //渠道没有数据时候0，线条样式
                                borderWidth: 1,
                                borderColor: '#aaa'
                            }
                        },
                        lineStyle: {
                            normal: {
                                color: 'source',
                                curveness: 0.5
                            }
                        }
                    }
                }
                let color_list = [
                    {
                        name: 'A1', itemStyle: {color: 'pink'},
                    },
                    {
                        name: 'A2',itemStyle: {color: 'pink'},
                    },
                    {
                        name: 'A3',itemStyle: {color: 'pink'},
                    },
                    {
                        name: 'B1',itemStyle: {color: 'red'},
                    },
                    {
                        name: 'B2',itemStyle: {color: 'red'},
                    },
                    {
                        name: 'B3',itemStyle: {color: 'red'},
                    },
                ]
                let data_list = [
                    {
                        source: 'A1',
                        target: 'A2',
                        value: 1
                    },
                    {
                        source: 'B1',
                        target: 'B2',
                        value: 2
                    },
                    {
                        source: 'A2',
                        target: 'A3',
                        value:2
                    },
                    {
                        source: 'B2',
                        target: 'B3',
                        value: 1
                    },
                ]
                sangjiOption.series.data = color_list
                sangjiOption.series.links = data_list
                let myChart = this.$echarts.init(document.getElementById('chart'));
                myChart.setOption(sangjiOption)
            })
        },
        methods: {

        }
    }
</script>

越简单的例子越能看清本质。复制代码可自行修改。
举例：A2的高度其实是相邻value的值相加，自动算出来的。