feat: 新增柱状图图表

src/packages/components/Charts/Bars/BarCommon/config.ts

@@ -2,17 +2,36 @@ import { getUUID } from '@/utils'
 import { BarCommonConfig } from './index'
 
 export default class Config {
-  id: string = getUUID()
+  private id: string = getUUID()
-  key: string = BarCommonConfig.key
+  private key: string = BarCommonConfig.key
-  attr = { x: 0, y: 0, w: 500, h: 300 }
+  public attr = { x: 0, y: 0, w: 500, h: 300 }
 
   // 图表配置项
   public config = {
-    global: {}
+    backgroundColor: 'rgba(0,0,0,0)',
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'shadow'
+      }
+    },
+    xAxis: {
+      type: 'category',
+      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110, 130],
+        type: 'bar',
+      },
+    ],
   }
 
   // 设置坐标
-  setPosition(x: number, y: number) {
+  public setPosition(x: number, y: number):void {
     this.attr.x = x
     this.attr.y = y
   }

src/packages/components/Charts/Bars/BarCommon/index.vue

@@ -1,14 +1,42 @@
 <template>
-  <div>
+  <div :style="wrapperStyle">
-    这里是柱状图组件渲染
+    <v-chart theme="dark" :option="option" autoresize />
   </div>
 </template>
 
 <script setup lang="ts">
+import { computed, toRef, PropType } from 'vue'
+import VChart from 'vue-echarts'
+import { use, graphic } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { BarChart } from 'echarts/charts'
+import { GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
+import config from './config'
+
 const props = defineProps({
-  chart: {
+  chartData: {
-    type: Object,
+    type: Object as PropType<config>,
-    require: true
+    required: true
+  }
+})
+
+use([
+  CanvasRenderer,
+  BarChart,
+  GridComponent,
+  TooltipComponent,
+  LegendComponent,
+])
+
+const option = computed(() => {
+  return props.chartData.config
+})
+
+const attr = toRef(props.chartData, 'attr')
+const wrapperStyle = computed(() => {
+  return {
+    width: `${attr.value.w}px`,
+    height: `${attr.value.h}px`,
   }
 })
 </script>

src/utils/utils.ts

@@ -7,7 +7,7 @@ import debounce from 'lodash/debounce'
  * * 生成一个不重复的ID
  * @param { Number } randomLength
  */
-export function getUUID(randomLength: number = 10) {
+export function getUUID(randomLength = 10) {
   return Number(
     Math.random().toString().substr(2, randomLength) + Date.now()
   ).toString(36)

src/views/chart/components/ContentEdit/index.vue

@@ -14,7 +14,7 @@
       <EditRange>
         <!-- 组件名称会重复，必须使用 id -->
         <div v-for="item in chartEditStore.getComponentList" :key="item.id">
-          <component :is="item.key" />
+          <component :is="item.key" :chartData="item"/>
         </div>
       </EditRange>
     </div>