合并分支 'feature/branch_cxr' 到 'develop'

Feature/branch cxr

查看合并请求 !20

src/icons/svg/sankey.svg

+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1689905026346" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1736" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M955 99h-32c-2.8 0-5 2.2-5 5v62c-173-7.8-345 33.2-494.3 118.4-36.4 22.1-74.2 42-113.2 59.6-57.6-53.2-127.9-91.5-204.4-112.1V104c0-2.8-2.2-5-5-5H69c-2.8 0-5 2.2-5 5v816c0 2.8 2.2 5 5 5h32c2.8 0 5-2.2 5-5v-64.3c146.4-13.8 288.5-55.9 417.7-123.8 39.1-20.8 79.4-39.5 120.7-56 85.9 41.2 178.4 68.2 273.5 79.9V920c0 2.8 2.2 5 5 5H955c2.8 0 5-2.2 5-5V104c0-2.8-2.2-5-5-5zM106 294.4c51 16.2 98.5 41.9 139.4 75.9C200.1 387 153.5 399.9 106 409V294.4z m327 282c-101.5 52.9-212.5 86.7-327 99.7v-206c66.3-11.7 131.1-30.3 193.2-55.7 20 17.9 40.7 37.5 62.5 59.6 29.6 32.3 61.8 62.4 96.3 90l-25 12.4z m86.4-42.3c-40.2-29.4-77.5-62.3-111.3-98.3-16.3-17.3-31.9-33.4-47.5-47.7 33-15.5 65.1-32.6 96.3-51.3C596.4 258.1 756.7 220.1 918 226.7v208.2c-138.5 6-274.4 39.7-398.6 99.2z m208.8 113.8c61.6-18.9 125.3-30.3 189.7-34v82.5c-65.1-8-128.9-24.3-189.7-48.5z" p-id="1737"></path></svg>
\ No newline at end of file

src/lang/en.js

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

src/lang/tw.js

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

src/lang/zh.js

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

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

+import { getLabel, getLegend, getPadding, getTheme, getTooltip, getXAxis } 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)
+  // data
+  const data = chart.data.tableRow
+  const sankeyData = []
+
+  const valueName = chart.data.fields.find((item) => { return item.originName === 'value' })
+  const keys = chart.data.fields.map((v) => {
+    if (v.originName !== 'value') {
+      return v.dataeaseName
+    }
+  }).filter((i) => i)
+
+  if (data && keys.length > 0) {
+    data.forEach((d) => {
+      keys.reduce((a, b) => {
+        if (a && b) {
+          sankeyData.push({
+            source: d[a],
+            target: d[b],
+            value: d[valueName.dataeaseName],
+            path: keys.map((item) => {
+              const num = []
+              num.push(d[item])
+              return num
+            }).join('->')
+          })
+        }
+        return b
+      })
+    }
+    )
+  }
+  // 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,58 @@ export const TYPE_CONFIGS = [
   },
   },
   {
   {
     render: 'antv',
     render: 'antv',
+    category: 'chart.chart_type_relation',
+    value: 'chart_sankey',
+    title: 'chart.chart_sankey',
+    icon: 'sankey',
+    properties: [
+      'color-selector',
+      'label-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',
     category: 'chart.chart_type_space',
     value: 'flow-map',
     value: 'flow-map',
     title: 'chart.chart_flow_map',
     title: 'chart.chart_flow_map',

src/views/chart/components/ChartComponentG2.vue

@@ -66,6 +66,7 @@ import { baseFlowMapOption } from '@/views/chart/chart/map/map_antv'
 import { baseBubbleMapOption } from '@/views/chart/chart/bubble/bubble_antv'
 import { baseBubbleMapOption } from '@/views/chart/chart/bubble/bubble_antv'
 import { baseCityBrightnessMapOptionAntV } from '@/views/chart/chart/cityBrightness/cityBrightness_antv'
 import { baseCityBrightnessMapOptionAntV } from '@/views/chart/chart/cityBrightness/cityBrightness_antv'
 import { clear } from 'size-sensor'
 import { clear } from 'size-sensor'
+import {baseSankeyOptionAntV} from "@/views/chart/chart/sankey/sankey_antv";
 export default {
 export default {
   name: 'ChartComponentG2',
   name: 'ChartComponentG2',
   components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
   components: { TitleRemark, ViewTrackBar, ChartTitleUpdate },
@@ -311,9 +312,11 @@ export default {
         this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
         this.myChart = baseBubbleMapOption(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'city-brightness') {
       } else if (chart.type === 'city-brightness') {
         this.myChart = baseCityBrightnessMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
         this.myChart = baseCityBrightnessMapOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
-      } else if (chart.type === 'threeDColumn') {
+       }else if (chart.type === 'chart_sankey') {
+        this.myChart = baseSankeyOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+       } else if (chart.type === 'threeDColumn') {
         this.myChart = base3DColumnOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
         this.myChart = base3DColumnOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
-      } else {
+       } else {
         if (this.myChart) {
         if (this.myChart) {
           this.antVRenderStatus = false
           this.antVRenderStatus = false
           this.myChart.destroy()
           this.myChart.destroy()