feat(视图): 新增面积图

frontend/src/lang/en.js

@@ -1194,7 +1194,10 @@ export default {
     dimension_letter_space: 'Name Letter Space',
     font_family: 'Font Family',
     letter_space: 'Letter Space',
-    font_shadow: 'Font Shadow'
+    font_shadow: 'Font Shadow',
+    chart_area: 'Area',
+    fix: 'Fix',
+    dynamic: 'Dynamic'
   },
   dataset: {
     parse_filed: 'Parse Field',
@@ -1436,7 +1439,8 @@ export default {
     union_repeat: 'This dataset is already union，do not union repeat',
     preview_result: 'Preview',
     sql_ds_union_error: 'Direct connect SQL dataset can not be union',
-    api_data: 'API dataset'
+    api_data: 'API dataset',
+    copy: 'Copy'
   },
   driver: {
     driver: 'Driver',

frontend/src/lang/tw.js

@@ -1193,7 +1193,10 @@ export default {
     dimension_letter_space: '名稱字間距',
     font_family: '字體',
     letter_space: '字間距',
-    font_shadow: '字體陰影'
+    font_shadow: '字體陰影',
+    chart_area: '面積圖',
+    fix: '固定值',
+    dynamic: '動態值'
   },
   dataset: {
     parse_filed: '解析字段',
@@ -1435,7 +1438,8 @@ export default {
     union_repeat: '當前數據集已被關聯，請勿重復關聯',
     preview_result: '預覽結果',
     sql_ds_union_error: '直連模式下SQL數據集，不支持關聯',
-    api_data: 'API 數據集'
+    api_data: 'API 數據集',
+    copy: '復製'
   },
   driver: {
     driver: '驅動',

frontend/src/lang/zh.js

@@ -1195,7 +1195,10 @@ export default {
     dimension_letter_space: '名称字间距',
     font_family: '字体',
     letter_space: '字间距',
-    font_shadow: '字体阴影'
+    font_shadow: '字体阴影',
+    chart_area: '面积图',
+    fix: '固定值',
+    dynamic: '动态值'
   },
   dataset: {
     parse_filed: '解析字段',
@@ -1437,7 +1440,8 @@ export default {
     union_repeat: '当前数据集已被关联，请勿重复关联',
     preview_result: '预览结果',
     sql_ds_union_error: '直连模式下SQL数据集，不支持关联',
-    api_data: 'API 数据集'
+    api_data: 'API 数据集',
+    copy: '复制'
   },
   driver: {
     driver: '驱动',

frontend/src/views/chart/chart/line/line_antv.js

@@ -100,7 +100,7 @@ export function baseLineOptionAntV(plot, container, chart, action) {
   return plot
 }
 
-export function baseAreaOptionAntV(plot, container, chart, action) {
+export function baseAreaOptionAntV(plot, container, chart, action, isStack) {
   // theme
   const theme = getTheme(chart)
   // attr
@@ -131,6 +131,7 @@ export function baseAreaOptionAntV(plot, container, chart, action) {
     yAxis: yAxis,
     slider: slider,
     annotations: analyse,
+    isStack: isStack,
     interactions: [
       {
         type: 'legend-active', cfg: {

frontend/src/views/chart/chart/util.js

@@ -420,6 +420,86 @@ export const TYPE_CONFIGS = [
       ]
     }
   },
+  {
+    render: 'antv',
+    category: 'chart.chart_type_trend',
+    value: 'area',
+    title: 'chart.chart_area',
+    icon: 'area',
+    properties: [
+      'color-selector',
+      'size-selector-ant-v',
+      'label-selector-ant-v',
+      'tooltip-selector-ant-v',
+      'x-axis-selector-ant-v',
+      'y-axis-selector-ant-v',
+      'title-selector-ant-v',
+      'legend-selector-ant-v'
+    ],
+    propertyInner: {
+      'color-selector': [
+        'value',
+        'colorPanel',
+        'customColor',
+        'alpha'
+      ],
+      'size-selector-ant-v': [
+        'lineWidth',
+        'lineSymbol',
+        'lineSymbolSize',
+        'lineSmooth'
+      ],
+      'label-selector-ant-v': [
+        'show',
+        'fontSize',
+        'color'
+      ],
+      'tooltip-selector-ant-v': [
+        'show',
+        'textStyle'
+      ],
+      'x-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      'y-axis-selector-ant-v': [
+        'show',
+        'position',
+        'name',
+        'nameTextStyle',
+        'axisValue',
+        'splitLine',
+        'axisForm',
+        'axisLabel'
+      ],
+      '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_trend',

frontend/src/views/chart/components/ChartComponentG2.vue

@@ -200,8 +200,10 @@ export default {
         this.myChart = hBaseBarOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false, true)
       } else if (chart.type === 'line') {
         this.myChart = baseLineOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+      } else if (chart.type === 'area') {
+        this.myChart = baseAreaOptionAntV(this.myChart, this.chartId, chart, this.antVAction, false)
       } else if (chart.type === 'line-stack') {
-        this.myChart = baseAreaOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
+        this.myChart = baseAreaOptionAntV(this.myChart, this.chartId, chart, this.antVAction, true)
       } else if (chart.type === 'scatter') {
         this.myChart = baseScatterOptionAntV(this.myChart, this.chartId, chart, this.antVAction)
       } else if (chart.type === 'radar') {