资金看板

src/views/largeScreen/components/leftPage.vue

@@ -33,16 +33,25 @@
       />
     </div>
     <div class="contract_box">
-
+      <EchartBox :option="barOption" />
     </div>
   </div>
 </template>
 
 <script setup>
 import { ref, reactive, onMounted, computed, toRefs, getCurrentInstance, nextTick } from 'vue';
-import echarts from 'echarts';
+// import echarts from 'echarts';
 import TitleComponent  from './TitleComponent.vue';
 import ProgressComponent from './ProgressComponent.vue';
+import EchartBox from '@/components/EchartBox/index.vue';
+import { getBarOptions2 } from './optionList';
+const barOption = ref();
+const getCapitalData = (data) => {
+  barOption.value = getBarOptions2();
+};
+onMounted(() => {
+  getCapitalData();
+});
 </script>
 
 <style lang="scss">
@@ -52,6 +61,9 @@ import ProgressComponent from './ProgressComponent.vue';
   .kpi_box{
     margin-bottom: 10px;
   }
+ .contract_box{
+    height: 35vh;
+  }
   .kpi_box,.contract_box {
     padding: 10px;
     box-sizing: border-box;