<!--
 * @Author: Fly
 * @Date: 2025-12-16 09:29:28
 * @LastEditTime: 2025-12-16 13:37:54
 * @Description: 
-->
<template>
    <div ref="EchartsRef" style="width: 100%; height: 300px;" />
</template>

<script>
import * as echarts from "echarts";

export default {
    name: '',
    props: {
        EchartsValue: {
            type: Object,
            default: null
        }
    },
    data() {
        return {

        };
    },
    mounted() {
        // this.initChart();
    },
    watch: {
        EchartsValue: {
            handler(newVal, oldVal) {
                if (newVal) {
                    this.initChart(newVal);
                }
            },
            deep: true
        }
    },
    methods: {
        initChart(Params) {
            const { LegendData = [], XAxisData = [], SeriesData = [] } = Params || {};
            var myChart = echarts.init(this.$refs.EchartsRef);

            let option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
                    data: LegendData
                },
                grid: {
                    left: '3%',
                    right: '5%',
                    bottom: '0%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                    data: XAxisData,
                    // axisLabel: {
                    //     rotate: 30, // 旋转角度，正值为逆时针旋转
                    //     align: 'center',
                    //     verticalAlign: 'center',
                    //     margin: 20  // 标签与坐标轴的距离
                    // }
                },
                yAxis: {
                    type: 'value'
                },
                series: SeriesData
                // [
                //     {
                //         name: 'Email',
                //         type: 'line',
                //         stack: 'Total',
                //         data: [120, 132, 101, 134, 90, 230, 210],
                //         color: '#409eff'
                //     }
                // ]
            };

            option && myChart.setOption(option);
        }
    }
};
</script>

<style lang='scss' scoped></style>