|
|
@@ -1,28 +1,51 @@
|
|
|
<template>
|
|
|
- <hc-card>
|
|
|
- <template #header>
|
|
|
- 1
|
|
|
- </template>
|
|
|
+ <hc-card title="章节完成投资柱状图">
|
|
|
<template #extra>
|
|
|
- <el-button hc-btn type="primary">
|
|
|
- <HcIcon name="add" />
|
|
|
- <span>新增</span>
|
|
|
- </el-button>
|
|
|
+ <div class="w-40">
|
|
|
+ <el-select v-model="searchForm.key1" filterable block placeholder="选择工区">
|
|
|
+ <el-option label="一工区" value="1" />
|
|
|
+ <el-option label="二工区" value="1" />
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
- 1111
|
|
|
+ <hc-charts :option="chartsOption" />
|
|
|
</hc-card>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onMounted, ref } from 'vue'
|
|
|
+import { ref } from 'vue'
|
|
|
|
|
|
defineOptions({
|
|
|
name: 'PeriodsLedgersSection',
|
|
|
})
|
|
|
|
|
|
-//渲染完成
|
|
|
-onMounted(() => {
|
|
|
+//搜索表单
|
|
|
+const searchForm = ref({
|
|
|
+ key1: null,
|
|
|
+})
|
|
|
|
|
|
+const chartsOption = ref({
|
|
|
+ color: ['#99CC98', '#FF999A'],
|
|
|
+ legend: {},
|
|
|
+ tooltip: {},
|
|
|
+ grid: {
|
|
|
+ top: '50px',
|
|
|
+ left: '0',
|
|
|
+ right: '6px',
|
|
|
+ bottom: '0',
|
|
|
+ containLabel: true,
|
|
|
+ },
|
|
|
+ dataset: {
|
|
|
+ source: [
|
|
|
+ ['product', '变更后金额', '累计计量金额'],
|
|
|
+ ['100章', 43.3, 85.8],
|
|
|
+ ['200章', 83.1, 73.4],
|
|
|
+ ['300章', 86.4, 65.2],
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ xAxis: { type: 'category' },
|
|
|
+ yAxis: {},
|
|
|
+ series: [{ type: 'bar' }, { type: 'bar' }],
|
|
|
})
|
|
|
</script>
|
|
|
|
