<template>
    <div id="main" style="width: 100%;" ref="main">
    </div>
</template>
   
<script>
import * as echarts from "echarts";
export default {
    name: 'HelloWorld',
    chartOptions: {
        maintainAspectRatio: false,
        responsive: true
    },
    mounted() {
        this.test()
    },
    methods: {
        test() {
            // 官方示例 var myChart = echarts.init(document.getElementById('main'));  
            const myChart = echarts.init(this.$refs.main); // 我们可以这样写
            // 
            const time = (function () { // 立即执行函数
                let now = new Date();  // 获得当前的时间
                let res = []; // 存放时间的数组
                let len = 20; // 要存几个时间？
                while (len--) {
                    res.unshift(now.toLocaleTimeString().replace(/^\D*/, '')); // 转换时间，大家可以打印出来看一下
                    now = new Date(+now - 2000) // 延迟几秒存储一次？
                }
                return res;
            })();
            const dataOne = [11, 4, 7, 8, 13, 22]
            //配置项，可以去查一下官方文档
            let options = {
                title: {
                    text: '动态',
                   
                    textStyle: {
                        color: 'black',
                        fontSize:10
                    },
                },

                legend: {},
                xAxis: {
                    
                    type: 'category',
                    data: time, // 把时间组成的数组接过来，放在x轴上
                    boundaryGap: true,
                    axisLabel: {
                        fontSize: 10
                    },
                },
                yAxis: {
                    
                    type: 'value',
                    axisLabel: {
                        fontSize: 10
                    },
                },
                series: [
                    {
                        data: dataOne,
                        type: 'line',
                        smooth: true,
                        markPoint: {
                            data: [
                                { type: 'max', name: '最大值', symbolSize: 35 },
                                { type: 'min', name: '最小值', symbolSize: 35 }
                            ]
                        },
                        markLine: {
                            data: [{ type: 'average', name: '平均值' }]
                        }
                    },

                ]
            }
            myChart.setOption(options)
        }
    }
}
</script>
   
<style scoped lang="scss"></style>