<!--  -->
<template>
    <div class="card table">
        <div style="height: 400px;" :id="props.id" class="myChart">
        </div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, inject,watch,reactive } from "vue";
import findDataFun from '@/plugins/findData'
// 接受父组件参数，配置默认值
const props = defineProps({
    id: {
        type: String,
        default: () => '',
    },
    lineData:{
        type:Object,
        default: () => {},
    },
    switchData:{
        type:Boolean,
        default: () =>true,
    }
});

let echart:any = null
let myChart:any = null

let echartData:any = reactive({
    titles:'',//标题
    xAxisArr:[],//x轴
    seriesDiscount:[], //合同总金额
    seriesRecoveries:[] //合同已回款金额
})
watch(() => props.switchData,()=>{
    echartData = findDataFun('line',props.lineData,props.switchData)
    myChart.clear();
    myChart.setOption(initEcharts());
})

watch(() => props.lineData,async()=>{
    echartData = findDataFun('line',props.lineData,props.switchData)
    myChart.clear();
    myChart.setOption(initEcharts());
})
onMounted(() => {
    echart = inject('echart')
    myChart = echart.init(document.getElementById(props.id));
    setEchartFun();
})

//函数
const setEchartFun = async ()=>{
    myChart.setOption(initEcharts());
    window.onresize = function () {
        myChart.resize();
    };
}


const initEcharts = () => {
    // 绘制图表
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        title: {
            // text: 'Rainfall vs Evaporation',
            // subtext: echartData.titles
        },
        // grid: {
        //     left: '3%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        xAxis: [
            {
                boundaryGap: false,
                type: 'category',
                // data: echartData.xAxisArr
            }
        ],
        yAxis: {
            type: 'value'
        },
        series: [
            {
                // name: echartData.tooltip,
                type: 'line',
                smooth: true,
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                itemStyle: { //面积图颜色设置
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [
                            {
                                offset: 0, //offset 可取范围 0、0.1、0.2、到1
                                color: 'rgba(250, 51, 171, 0.8)', // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: 'rgba(206, 51, 181, 0.4)' // 100% 处的颜色
                            }
                        ],
                        globalCoord: false // 缺省为 false
                    }
                },
                data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
            }
        ]
    }
}

</script>
