<template>
  <!-- 采购: 历史敞口-->
  <div class="purchase-history">
    <div class="chart-main"
         id="main"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted } from 'vue';
import { initData } from '@/common/methods';
import * as echarts from 'echarts/core';
import {
    BarChart,
    // 系列类型的定义后缀都为 SeriesOption
    BarSeriesOption,
    LineChart,
    LineSeriesOption,
} from 'echarts/charts';
import {
    TitleComponent,
    // 组件类型的定义后缀都为 ComponentOption
    TitleComponentOption,
    GridComponent,
    GridComponentOption,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
type ECOption = echarts.ComposeOption<BarSeriesOption | LineSeriesOption | TitleComponentOption | GridComponentOption>;

// 注册必须的组件
echarts.use([TitleComponent, GridComponent, LineChart, BarChart, CanvasRenderer]);
export default defineComponent({
    name: 'purchase-history',
    components: {},
    setup() {
        const option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {
                type: 'value',
            },
            series: [
                {
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                    type: 'line',
                    smooth: true,
                },
            ],
        };
        onMounted(() => {
            const ele = document.getElementById('main') as HTMLElement;
            const myChart = echarts.init(ele);
            myChart.setOption(option);
        });
        initData(() => {
            option;
        });
        return {};
    },
});
</script>

<style lang="less">
.purchase-history {
    height: 100%;
    .chart-main {
        height: 100%;
    }
}
</style
>;
