<template>
    <div id="lineChartId" style="width:100vw;height:200px;margin: 0 auto"></div>
</template>
<script setup>
    import * as echarts from 'echarts';
import { defineProps, reactive, watch, nextTick, onUnmounted,onMounted } from 'vue';
import {getCommitData} from './data.js'

const state = reactive({
    exportLoading: false,
    echartInstance: undefined,
    commitConfig:[],
    lineData:[]
})

function renderEchartLine() {
    // 基于准备好的dom，初始化echarts实例
    const domInstance=document.getElementById('lineChartId')
    if(domInstance){
        domInstance.removeAttribute('_echarts_instance_')
    }
    else{
        return 
    }
    const myChart = echarts.init(domInstance);
    const seriesItem=    {
      data: state.commitConfig.map(item=>item.count),
      type: 'line',
      smooth: true
    }
    const labelData=state.commitConfig.map(item=>item.date)
    const seriesData=[seriesItem]

    const option = {
        title: {
            text: 'git code commit次数',
            textStyle:{
                color:'#ffffff'
            }
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: {}
            }
        },
        dataZoom: [
            {
                id: 'dataZoomX',
                type: 'slider',
                xAxisIndex: [0],
                filterMode: 'filter'
            }
        ],
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            
        },
        xAxis: {
            type: 'category',
            data: labelData,
            axisLabel:{
                color:'#ffffff'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel:{
                color:'#ffffff'
            }
        },
        grid: {
            x: 60,
            x2: 100
        },
        series: seriesData
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option, true);
    // 监听
    state.echartInstance = myChart;
    window.onresize = myChart.resize;
}

onUnmounted(() => {
    window.onresize = null
})
const getCommitConfig= ()=>{
     state.commitConfig=getCommitData()
    renderEchartLine()
}

onMounted(()=>{
    getCommitConfig()
})
</script>