封装echarts

<template>

    <div  style="width: 600px; height: 400px" id="main"></div>

</template>

<script setup lang="ts">

import * as echarts from 'echarts';

import { ref, onMounted } from 'vue';

interface IProps {

    msglist: Array<number>;

}

const props = defineProps<IProps>();

const option = () => {

    const myCharts = echarts.init(document.getElementById('main'));

    myCharts.setOption({

        // title: {

        //     text: 'Stacked Line'

        // },

        tooltip: {

            trigger: 'axis'

        },

        legend: {

            data: ['商品被领样数', '寄样订单数', '寄样份数']

        },

        grid: {

            left: '3%',

            right: '4%',

            bottom: '3%',

            containLabel: true

        },

        //下载数据

        // toolbox: {

        //     feature: {

        //         saveAsImage: {}

        //     }

        // },

        xAxis: {

            type: 'category',

            boundaryGap: false,

            data: props.msglist.map((item)=>item.groupDay)

        },

        yAxis: {

            type: 'value'

        },

        series: [

            {

                name: '商品被领样数',

                type: 'line',

                stack: 'Total',

                data: props.msglist.map((item)=>item.anchorCount)

            },

            {

                name: '寄样订单数',

                type: 'line',

                stack: 'Total',

                data: props.msglist.map((item)=>item.anchorIdCount)

            },

            {

                name: '寄样份数',

                type: 'line',

                stack: 'Total',

                data: props.msglist.map((item)=>item.goodsCount)

            },

            // {

            //     name: 'Direct',

            //     type: 'line',

            //     stack: 'Total',

            //     data: [320, 332, 301, 334, 390, 330, 320]

            // },

            // {

            //     name: 'Search Engine',

            //     type: 'line',

            //     stack: 'Total',

            //     data: [820, 932, 901, 934, 1290, 1330, 1320]

            // }

        ]

    })

}

onMounted(() => {

   setTimeout(() => {

        option()   

}, 1000);   

})

</script>