<template>
    <div id="main"></div>
</template>

<script setup>
import * as echarts from 'echarts/core';
import { GridComponent } from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { TooltipComponent } from 'echarts/components';
echarts.use([GridComponent, LineChart, CanvasRenderer, UniversalTransition,TooltipComponent]);



var option;


const init = (xData,yData) => {
    option = {
        tooltip : {
            trigger: 'axis',
            valueFormatter: function (params) {
                console.log(params);
              return params+'次';

            }
        },
       
    xAxis: {
        type: 'category',
        data: xData
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name: '次数',
            data:yData,
            showSymbol: true,
            type: 'line',
            smooth: true
        }
    ]
};
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);
        option && myChart.setOption(option);
        window.removeEventListener("resize", () => {
            myChart.resize();
        });
        window.addEventListener("resize", () => {
            myChart.resize();
        });
    
};
 defineExpose({ init });
// onMounted(() => {
//     nextTick(() => {
//         var chartDom = document.getElementById('main');
//         var myChart = echarts.init(chartDom);
//         option && myChart.setOption(option);
//         window.addEventListener("resize", () => {
//             myChart.resize();
//         });
//     });
// });
</script>

<style scoped>
#main {
    width: 100%;
    height: 400px;
    border-radius: 10px;
    background: #fff;
}
</style>
