
<template>
  <div ref="chartContainer" style="width: 100%; height: 100%;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'SankeyChart',
  data() {
    return {
      chart: null,
      chartOption: {
        series: {
          type: 'sankey',
          layout: 'none',
          emphasis: {
            focus: 'adjacency'
          },
          data: [
            { name: 'a' },
            { name: 'b' },
            { name: 'a1' },
            { name: 'a2' },
            { name: 'b1' },
            { name: 'c' }
          ],
          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: 'c', value: 2 }
          ],
          itemStyle: {
            color: '#4b94d1',
            borderColor: '#2a5d8a'
          },
          lineStyle: {
            color: 'source',
            curveness: 0.5
          }
        }
      }
    }
  },
  mounted() {
    this.initChart();
    window.addEventListener('resize', this.handleResize);
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$refs.chartContainer);
      this.chart.setOption(this.chartOption);
      
      // 添加点击事件监听
      this.chart.on('click', params => {
        console.log('节点点击:', params.name);
      });
    },
    handleResize() {
      this.chart && this.chart.resize();
    }
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    this.chart && this.chart.dispose();
  }
};
</script>
