[Core] [DataSet] [Visual] Add bar chart

core/datacap-web/src/components/visual/VisualEditor.vue

@@ -13,6 +13,9 @@
       <VisualLine v-else-if="configuration.type === Type.LINE"
                   :configuration="configuration">
       </VisualLine>
+      <VisualBar v-else-if="configuration.type === Type.BAR"
+                 :configuration="configuration">
+      </VisualBar>
     </div>
   </div>
 </template>
@@ -21,6 +24,7 @@ import {Configuration} from "@/components/visual/Configuration";
 import VisualTable from "@/components/visual/components/VisualTable.vue";
 import VisualLine from "@/components/visual/components/VisualLine.vue";
 import {Type} from "@/components/visual/Type";
+import VisualBar from "@/components/visual/components/VisualBar.vue";
 
 export default {
   name: 'VisualEditor',
@@ -30,7 +34,7 @@ export default {
       return Type
     }
   },
-  components: {VisualLine, VisualTable},
+  components: {VisualBar, VisualLine, VisualTable},
   props: {
     configuration: {
       type: Configuration

core/datacap-web/src/components/visual/components/VisualBar.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <div id="content"
+         style="width: 100%; height:400px;">
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import {Configuration} from "@/components/visual/Configuration"
+import VChart from '@visactor/vchart'
+
+let instance: VChart
+
+export default {
+  name: 'VisualBar',
+  props: {
+    configuration: {
+      type: Configuration
+    }
+  },
+  watch: {
+    configuration: {
+      handler: 'handlerReset',
+      deep: true
+    }
+  },
+  created()
+  {
+    this.handlerInitialize(false)
+  },
+  methods: {
+    handlerInitialize(reset: boolean)
+    {
+      setTimeout(() => {
+        const options = {
+          type: 'bar',
+          data: {values: this.configuration.columns},
+          xField: this.configuration.chartConfigure.xAxis,
+          yField: this.configuration.chartConfigure.yAxis
+        }
+        if (!reset) {
+          instance = new VChart(options, {dom: 'content'})
+          instance.renderAsync()
+        }
+        else {
+          instance.updateSpec(options, true)
+        }
+      })
+    },
+    handlerReset()
+    {
+      this.handlerInitialize(true)
+    }
+  }
+}
+</script>

core/datacap-web/src/i18n/langs/en/dataset.ts

@@ -36,6 +36,7 @@ export default {
   visualType: 'Visual Type',
   visualTypeTable: 'Table',
   visualTypeLine: 'Line',
+  visualTypeBar: 'Bar',
   visualConfigure: 'Visual Configure',
   visualConfigureNotSpecified: 'No configuration items are available',
   visualConfigureXAxis: 'X Axis',

core/datacap-web/src/i18n/langs/zhCn/dataset.ts

@@ -36,6 +36,7 @@ export default {
   visualType: '可视化类型',
   visualTypeTable: '表格',
   visualTypeLine: '折线图',
+  visualTypeBar: '柱状图',
   visualConfigure: '可视化配置',
   visualConfigureNotSpecified: '暂无可用配置项',
   visualConfigureXAxis: 'X轴',

core/datacap-web/src/views/admin/dataset/DatasetAdhoc.vue

@@ -114,6 +114,14 @@
                     </FontAwesomeIcon>
                   </Tooltip>
                 </Radio>
+                <Radio :label="Type.BAR">
+                  <Tooltip transfer
+                           :content="$t('dataset.visualTypeBar')">
+                    <FontAwesomeIcon icon="bar-chart"
+                                     size="2x">
+                    </FontAwesomeIcon>
+                  </Tooltip>
+                </Radio>
               </Row>
             </RadioGroup>
             <Divider orientation="left"
@@ -124,6 +132,10 @@
                                         :columns="configuration.headers"
                                         @commit="handlerCommit">
             </DatasetVisualConfigureLine>
+            <DatasetVisualConfigureBar v-else-if="configuration.type === Type.BAR"
+                                       :columns="configuration.headers"
+                                       @commit="handlerCommit">
+            </DatasetVisualConfigureBar>
             <Result v-else>
               <template #desc>
                 {{ $t('dataset.visualConfigureNotSpecified') }}
@@ -145,6 +157,7 @@ import VisualEditor from "@/components/visual/VisualEditor.vue";
 import CircularLoading from "@/components/loading/CircularLoading.vue";
 import DatasetVisualConfigureLine from "@/views/admin/dataset/components/adhoc/DatasetVisualConfigureLine.vue";
 import {Type} from "@/components/visual/Type";
+import DatasetVisualConfigureBar from "@/views/admin/dataset/components/adhoc/DatasetVisualConfigureBar.vue";
 
 export default {
   name: 'DatasetAdhoc',
@@ -154,7 +167,7 @@ export default {
       return Type
     }
   },
-  components: {DatasetVisualConfigureLine, CircularLoading, VisualEditor, FontAwesomeIcon, Draggable},
+  components: {DatasetVisualConfigureBar, DatasetVisualConfigureLine, CircularLoading, VisualEditor, FontAwesomeIcon, Draggable},
   data()
   {
     return {

core/datacap-web/src/views/admin/dataset/components/adhoc/DatasetVisualConfigureBar.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <Form :model="formState"
+          :label-width="60">
+      <FormItem prop="xAxis"
+                :label="$t('dataset.visualConfigureXAxis')">
+        <Select v-model="formState.xAxis">
+          <Option v-for="item in columns"
+                  :key="item"
+                  :value="item">
+            {{ item }}
+          </Option>
+        </Select>
+      </FormItem>
+      <FormItem prop="yAxis"
+                :label="$t('dataset.visualConfigureYAxis')">
+        <Select v-model="formState.yAxis">
+          <Option v-for="item in columns"
+                  :key="item"
+                  :value="item">
+            {{ item }}
+          </Option>
+        </Select>
+      </FormItem>
+    </Form>
+  </div>
+</template>
+<script lang="ts">
+
+export default {
+  name: 'DatasetVisualConfigureBar',
+  props: {
+    columns: {
+      type: Array,
+      default: () => []
+    }
+  },
+  watch: {
+    formState: {
+      handler: 'handlerCommit',
+      deep: true
+    }
+  },
+  data()
+  {
+    return {
+      formState: {
+        xAxis: null,
+        yAxis: null
+      }
+    }
+  },
+  methods: {
+    handlerCommit()
+    {
+      this.$emit('commit', this.formState)
+    }
+  }
+};
+</script>