工区各标完成投资柱状图

src/views/periods/ledgers/standards.vue

@@ -1,28 +1,38 @@
 <template>
-    <hc-card>
-        <template #header>
-            1
-        </template>
-        <template #extra>
-            <el-button hc-btn type="primary">
-                <HcIcon name="add" />
-                <span>新增</span>
-            </el-button>
-        </template>
-        1111
+    <hc-card title="各标完成投资柱状图">
+        <hc-charts :option="chartsOption" />
     </hc-card>
 </template>
 
 <script setup>
-import { onMounted, ref } from 'vue'
+import { ref } from 'vue'
 
 defineOptions({
     name: 'PeriodsLedgersStandards',
 })
 
-//渲染完成
-onMounted(() => {
-
+const chartsOption = ref({
+    color: ['#99CC98', '#FF999A'],
+    legend: {},
+    tooltip: {},
+    grid: {
+        top: '50px',
+        left: '0',
+        right: '6px',
+        bottom: '0',
+        containLabel: true,
+    },
+    dataset: {
+        source: [
+            ['product', '变更后金额', '累计计量金额'],
+            ['一工区', 43.3, 85.8],
+            ['二工区', 83.1, 73.4],
+            ['三工区', 86.4, 65.2],
+        ],
+    },
+    xAxis: { type: 'category' },
+    yAxis: {},
+    series: [{ type: 'bar' }, { type: 'bar' }],
 })
 </script>