<template>
 <div>
     <div class="block">
        <div style="font-weight: 600;font-size: 16px;color: rgba(0,0,0,0.9);margin-right: 16px;">{{ title }}</div>
        <el-date-picker
        v-model="value1"
        type="date"
        placeholder="开始日期"
        size="lager"
      />
      <div>&nbsp;至&nbsp;</div>
      <el-date-picker
        v-model="value2"
        type="date"
        placeholder="结束日期"
        size="lager"
      />
    </div>
     <div id="myChart" :style="{ width: '800px', height: '400px' }"></div>
    </div>
</template>
<script setup>
import * as echarts from 'echarts';
import request from "../api/request.js";
const value1 = ref('')
const value2 = ref('')
const orgindata = ref([])
const datax = ref([])
const datay = ref([])
var myChart;
const props = defineProps({
 title: {  
   type: String,  
  
 }, 


});
onMounted(()=>{
    initEcharts ()
    initdata()
})
onUnmounted(() => {
      // 销毁图表
      myChart.dispose;
    });
var option;

function initEcharts () {
    var chartDom = document.getElementById('myChart');
	 myChart = echarts.init(chartDom);


};


function initEchartsdata () {

     option = {
  xAxis: {
    data: datax.value
  },
  yAxis: {},
  series: [
    {
      data: datay.value,
      type: 'line',
      areaStyle: {}
    },
   
  ]
};

option && myChart.setOption(option);
}
const form = reactive({
    type: "2",
    start_time: value1.value,
    end_time: value2.value,
  
});
function initdata()
{
    request.indexdata(form).then(res=>{
    console.log('indexdata',res)
    orgindata.value=[]
    orgindata.value.push(...res.data.data)
    datax.value=orgindata.value.map(item=>item.date)
    datay.value=orgindata.value.map(item=>item.count)


    initEchartsdata()

  })
}
</script>
<style scoped>
.block {
    display: flex;

    align-items: center;
    margin-left: 16px;
  text-align: center;

}

</style>