measure/src/views/debit-pay/ledgers/section.vue

<template>
    <hc-new-card title="章节完成投资柱状图">
        <hc-charts :option="chartsOption" />
    </hc-new-card>
</template>

<script setup>
import { ref } from 'vue'
defineOptions({
    name: 'DebitPayLedgersSection',
})

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>