<template>
    <!--為echarts準備一個具備大小的容器dom-->
  	<div id="main" style="width: 600px;height: 400px;"></div>
</template>
<script>
    import echarts from 'echarts'

    export default {
        name: 'Chart',
        data () {
            return {
                charts: '',
            }
        },
        methods:{
            initLine(id){
                this.charts = echarts.init(document.getElementById(id))
                this.charts.setOption({
                    title: {
                        text: '動態資料 + 時間座標軸'
                    },
                    tooltip: {
                        trigger: 'axis',
                        formatter: function (params) {
                            params = params[0]
                            return params.value[0] + ' : ' + params.value[1]
                        },
                        axisPointer: {
                            animation: false
                        }
                    },
                    xAxis: {
                        type: 'time',
                        splitLine: {
                            show: false
                        }
                    },
                    yAxis: {
                        type: 'value',
                        boundaryGap: [0, '100%'],
                        splitLine: {
                            show: false
                        }
                    },
                    animation: false
                })
             }
        },
        mounted(){
            this.$nextTick(function() {
                this.initLine('main')
                this.charts.setOption({
                    series : [
                        {
                            name : '模擬資料0',
                            type : 'line',
                            showSymbol : false,
                            hoverAnimation : false,
                            data : [['2018-01-02', '3'],['2018-01-05', '4']]
                        }
                    ]
                })
                
                setTimeout(() => {
                    this.charts.appendData({
                        seriesIndex:0,
                        data : [['2018-01-03', '1'],['2018-01-07', '2']]
                    })
                },2000)
                
                setTimeout(() => {
                    this.charts.resize();    
                },4000)

                setTimeout(() => {
                    this.charts.setOption({
                        series : [
                            {},
                            {
                                name : '模擬資料1',
                                type : 'line',
                                showSymbol : false,
                                hoverAnimation : false,
                                data : [['2018-01-02', '5'],['2018-01-05', '10']]
                            }
                        ]
                    })
                    this.charts.appendData({
                        seriesIndex:1,
                        data : [['2018-01-03', '11'],['2018-01-10', '2']]
                    })
                },6000) 
                setTimeout(() => {
                    this.charts.resize();    
                },8000)
            })
        }
    }
</script>
<style scoped>
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
</style>