echarts桑基图动态数据

要在echarts桑基图中使用动态数据，你可以按照以下步骤进行操作：

1. 首先，引入echarts库和桑基图组件。你可以使用如下代码在组件中引入：

const echarts = require('echarts5/lib/echarts');
require('echarts/lib/chart/sankey');

2. 在main.js文件中注册echarts。你可以使用如下代码进行注册：

import * as echarts5 from 'echarts5';
Vue.use(echarts5);

3. 在组件的mounted生命周期钩子函数中，定义option对象，并配置图表的参数。你可以使用如下代码进行配置：

onMounted(() => {
  const myChart = echarts.init(chart.value);
  const option = {
    title: {
      text: '人口迁移桑基图',
      left: 'center',
      textStyle: {
        color: '#333',
        fontSize: 20,
        fontWeight: 'bold',
      },
    },
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
    },
    series: [
      {
        type: 'sankey',
        data: nodes.map(n => ({ name: n })),
        links: data.map(d => ({ source: d.source, target: d.target, value: d.value })),
        lineStyle: {
          opacity: 0.5,
          curveness: 0.3,
        },
        label: {
          position: 'right',
          color: '#000',
        },
        emphasis: {
          focus: 'adjacency',
          itemStyle: {
            borderWidth: 2,
            borderColor: '#333',
          },
        },
      },
    ],
  };
  myChart.setOption(option);
});

这样，你就可以在echarts桑基图中使用动态数据。只需将数据传递给`nodes`和`data`变量即可。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [echarts 桑基图](https://blog.csdn.net/lance_heart/article/details/126195333)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *3* [极致呈现系列之：Echarts桑基图的流动旋律](https://blog.csdn.net/w137160164/article/details/131341100)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]