<template>
    <div  class="border">   
        <div id="data-zoom" style="width:100%; height:400px">
        </div>
    </div>
</template>
<script>
// import Echarts from 'echarts';
import 'echarts/lib/component/dataZoom';

export default {
    props:{
        options: {
            startZoom: Number,
            endZoom: Number
        },
        series: Array
    },
    data(){
        return {
            data: {},
            options: {}
        }
    },
    watch: {
        startZoom(){
            this.loadDataZoom();
        },
        endZoom(){
            this.loadDataZoom();
        }
    },
    mounted() {
        this.loadDataZoom();
    },
    methods: {
        loadDataZoom(){
            this.loadOptions();
            let myChart = Echarts.init(document.getElementById('data-zoom')); 
            myChart.setOption(this.options);
        },
        loadOptions(){
            const options = {
                xAxis: {
                    type: 'value'
                },
                yAxis: {
                    type: 'value'
                },
                dataZoom: [
                    { // this dataZoom component controls x-axis by default
                        type: 'slider', // this dataZoom component is dataZoom component of slider
                        start: this.startZoom, // the left is located at 10%
                        end: this.endZoom // the right is located at 60%
                    }
                ],
                series: [
                    {
                        type: 'scatter',
                        itemStyle: {
                            opacity: 0.8
                        },
                        symbolSize: function (val) {
                            return val[2] * 40;
                        },
                        data: this.series
                    }
                ]
            }
            this.options = options;
        }   
    }
}
</script>
