Echarts如何实现桑基图展示

ECharts 是一个使用 JavaScript 实现的开源可视化库，可以用于生成各种图表，包括桑基图（Sankey Diagram）。要在 ECharts 中实现桑基图展示，请按照以下步骤操作：

1. 引入 ECharts 库

在 HTML 文件中引入 ECharts 的 JavaScript 文件。你可以从 ECharts 官网下载，或者使用 CDN 链接。

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>

2. 创建一个用于渲染图表的 DOM 元素

在 HTML 文件中创建一个具有唯一 ID 的 div 元素，用于渲染桑基图。

<div id="sankeyChart" style="width: 600px; height: 400px;"></div>

3. 准备桑基图的数据

桑基图需要三个主要数据：节点（nodes）和连接（links）。节点表示数据流中的各个阶段，连接表示数据流的方向和数量。

const nodes = [
  { name: '节点1' },
  { name: '节点2' },
  { name: '节点3' },
  { name: '节点4' }
];

const links = [
  { source: '节点1', target: '节点2', value: 10 },
  { source: '节点1', target: '节点3', value: 5 },
  { source: '节点2', target: '节点4', value: 15 },
  { source: '节点3', target: '节点4', value: 5 }
];

4. 初始化 ECharts 实例并配置桑基图选项

在 JavaScript 文件中，初始化一个 ECharts 实例，并设置其配置项（option）以生成桑基图。

const chart = echarts.init(document.getElementById('sankeyChart'));

const option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [
    {
      type: 'sankey',
      layout: 'none',
      data: nodes,
      links: links,
      lineStyle: {
        color: 'source',
        curveness: 0.5
      },
      label: {
        show: true,
        position: 'right',
        formatter: '{b}'
      },
      emphasis: {
        focus: 'adjacency'
      }
    }
  ]
};

chart.setOption(option);

现在，你应该可以在浏览器中看到一个简单的桑基图。你可以根据需要调整配置项以自定义图表的外观和行为。更多关于 ECharts 桑基图的配置选项，请参考官方文档：https://echarts.apache.org/zh/option.html#series-sankey