measure/src/views/periods/ledgers/section.vue

<template>
    <hc-card title="章节完成投资柱状图">
        <template #extra>
            <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>
        <hc-charts :option="chartsOption" />
    </hc-card>
</template>

<script setup>
import { ref } from 'vue'

defineOptions({
    name: 'PeriodsLedgersSection',
})

//搜索表单
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>

<style scoped lang="scss">

</style>