桑基图

src/lang/en.js

@@ -1179,6 +1179,7 @@ export default {
     chart_pie_rose: 'Rose Pie',
     chart_pie_donut_rose: 'Rose Donut Pie',
     chart_funnel: 'Funnel',
+    chart_sankey:'Sankey',
     chart_radar: 'Radar',
     chart_gauge: 'Gauge',
     chart_map: 'Map',

src/lang/tw.js

@@ -1178,6 +1178,7 @@ export default {
     chart_pie_rose: '南丁格爾玫瑰圖',
     chart_pie_donut_rose: '南丁格爾玫瑰環形圖',
     chart_funnel: '漏鬥圖',
+    chart_sankey:'桑基圖',
     chart_radar: '雷達圖',
     chart_gauge: '儀表盤',
     chart_map: '地圖',

src/lang/zh.js

@@ -1177,6 +1177,7 @@ export default {
     chart_pie_rose: '南丁格尔玫瑰图',
     chart_pie_donut_rose: '南丁格尔玫瑰环形图',
     chart_funnel: '漏斗图',
+    chart_sankey:'桑基图',
     chart_radar: '雷达图',
     chart_gauge: '仪表盘',
     chart_map: '地图',

src/views/chart/chart/sankey/sankey_antv.js

+import { getLabel, getLegend, getPadding, getTheme, getTooltip } from '@/views/chart/chart/common/common_antv'
+import { Sankey } from '@antv/g2plot'
+import { antVCustomColor } from '@/views/chart/chart/util'
+
+export function baseSankeyOptionAntV(plot, container, chart, action) {
+  // theme
+  const theme = getTheme(chart)
+  // attr
+  const label = getLabel(chart)
+  const tooltip = getTooltip(chart)
+  // style
+  const legend = getLegend(chart)
+  // data
+  // const data = chart.data.data
+  console.log(
+    'plot, container, chart, action', plot, container, chart, action
+  )
+  const data = [
+    {
+      'Survived': 'Perished',
+      'Sex': 'Male',
+      'Age': 'Adult',
+      'Class': 'Crew',
+      'value': 670
+    },
+    {
+      'Survived': 'Perished',
+      'Sex': 'Male',
+      'Age': 'Adult',
+      'Class': 'Third Class',
+      'value': 387
+    },
+    {
+      'Survived': 'Perished',
+      'Sex': 'Male',
+      'Age': 'Adult',
+      'Class': 'Second Class',
+      'value': 154
+    },
+    {
+      'Survived': 'Perished',
+      'Sex': 'Male',
+      'Age': 'Adult',
+      'Class': 'First Class',
+      'value': 118
+    },
+    {
+      'Survived': 'Perished',
+      'Sex': 'Male',
+      'Age': 'Child',
+      'Class': 'Third Class',
+      'value': 35
+    },
+    {
+      'Survived': 'Perished',
+      'Sex': 'Female',
+      'Age': 'Adult',
+      'Class': 'Crew',
+      'value': 3
+    },
+    {
+      'Survived': 'Perished',
+      'Sex': 'Female',
+      'Age': 'Adult',
+      'Class': 'Third Class',
+      'value': 89
+    },
+    {
+      'Survived': 'Perished',
+      'Sex': 'Female',
+      'Age': 'Adult',
+      'Class': 'Second Class',
+      'value': 13
+    },
+    {
+      'Survived': 'Perished',
+      'Sex': 'Female',
+      'Age': 'Adult',
+      'Class': 'First Class',
+      'value': 4
+    },
+    {
+      'Survived': 'Perished',
+      'Sex': 'Female',
+      'Age': 'Child',
+      'Class': 'Third Class',
+      'value': 17
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Male',
+      'Age': 'Adult',
+      'Class': 'Crew',
+      'value': 192
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Male',
+      'Age': 'Adult',
+      'Class': 'Third Class',
+      'value': 75
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Male',
+      'Age': 'Adult',
+      'Class': 'Second Class',
+      'value': 14
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Male',
+      'Age': 'Adult',
+      'Class': 'First Class',
+      'value': 57
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Male',
+      'Age': 'Child',
+      'Class': 'Third Class',
+      'value': 13
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Male',
+      'Age': 'Child',
+      'Class': 'Second Class',
+      'value': 11
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Male',
+      'Age': 'Child',
+      'Class': 'First Class',
+      'value': 5
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Female',
+      'Age': 'Adult',
+      'Class': 'Crew',
+      'value': 20
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Female',
+      'Age': 'Adult',
+      'Class': 'Third Class',
+      'value': 76
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Female',
+      'Age': 'Adult',
+      'Class': 'Second Class',
+      'value': 80
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Female',
+      'Age': 'Adult',
+      'Class': 'First Class',
+      'value': 140
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Female',
+      'Age': 'Child',
+      'Class': 'Third Class',
+      'value': 14
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Female',
+      'Age': 'Child',
+      'Class': 'Second Class',
+      'value': 13
+    },
+    {
+      'Survived': 'Survived',
+      'Sex': 'Female',
+      'Age': 'Child',
+      'Class': 'First Class',
+      'value': 1
+    }
+  ]
+  const sankeyData = []
+  const keys = ['Survived', 'Sex', 'Age', 'Class']
+  data.forEach((d) => {
+    keys.reduce((a, b) => {
+      if (a && b) {
+        sankeyData.push({
+          source: d[a],
+          target: d[b],
+          value: d.value,
+          path: `${d[keys[0]]} -> ${d[keys[1]]} -> ${d[keys[2]]} -> ${d[keys[3]]}`
+        })
+      }
+      return b
+    })
+  }
+  )
+  console.log('sankeyData==', sankeyData)
+
+  // options
+  const options = {
+    theme: theme,
+    data: sankeyData,
+    sourceField: 'source',
+    targetField: 'target',
+    weightField: 'value',
+    nodeWidthRatio: 0.01,
+    nodePaddingRatio: 0.03,
+    nodeDraggable: true,
+    rawFields: ['path'],
+    tooltip: {
+      fields: ['path', 'value'],
+      formatter: ({ path, value }) => {
+        return {
+          name: path,
+          value: value
+        }
+      }
+    }
+  }
+  // custom color
+  options.color = antVCustomColor(chart)
+  // 开始渲染
+  if (plot) {
+    plot.destroy()
+  }
+  plot = new Sankey(container, options)
+  plot.off('interval:click')
+  plot.on('interval:click', action)
+  return plot
+}
+

src/views/chart/chart/util.js

@@ -1907,6 +1907,59 @@ export const TYPE_CONFIGS = [
   },
   {
     render: 'antv',
+    category: 'chart.chart_type_relation',
+    value: 'chart_sankey',
+    title: 'chart.chart_sankey',
+    icon: 'sankey',
+    properties: [
+      'color-selector',
+      'label-selector-ant-v',
+      'tooltip-selector-ant-v',
+      'title-selector-ant-v',
+      'legend-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'colorPanel',
+        'customColor',
+        'alpha'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color',
+        'position-h'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'title-selector-ant-v': [
+        'show',
+        'title',
+        'fontSize',
+        'color',
+        'hPosition',
+        'isItalic',
+        'isBolder',
+        'remarkShow',
+        'fontFamily',
+        'letterSpace',
+        'fontShadow'
+      ],
+      'legend-selector-ant-v': [
+        'show',
+        'icon',
+        'orient',
+        'textStyle',
+        'hPosition',
+        'vPosition'
+      ]
+    }
+  },
+  {
+    render: 'antv',
     category: 'chart.chart_type_space',
     value: 'flow-map',
     title: 'chart.chart_flow_map',

src/views/chart/components/ChartComponentG2.vue

@@ -63,6 +63,7 @@ import { mapState } from 'vuex'
 import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
 import { baseBubbleMapOption } from '@/views/chart/chart/bubble/bubble_antv'
 import { clear } from 'size-sensor'
+import {baseSankeyOptionAntV} from "@/views/chart/chart/sankey/sankey_antv";
 export default {
   name: 'ChartComponentG2',
   components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
@@ -304,13 +305,14 @@ export default {
         this.myChart = baseBidirectionalBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'bubble') {
         this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
-      } else {
+      } else if (chart.type === 'chart_sankey') {
+        this.myChart = baseSankeyOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      }else {
         if (this.myChart) {
           this.antVRenderStatus = false
           this.myChart.destroy()
         }
       }
-
       if (this.myChart && !equalsAny(chart.type, 'liquid', 'flow-map', 'bubble') && this.searchCount > 0) {
         this.myChart.options.animation = false
       }