<template>
	<div ref="x_chart" style="height: 100%;"></div>
</template>

<script>
	let echarts = require("echarts/lib/echarts");
    require("echarts/lib/component/tooltip");
    require("echarts/lib/component/legend");
    require("echarts/lib/component/title");
    require("echarts/lib/component/markLine");
    require("echarts/lib/component/markArea");
    require("echarts/lib/component/axisPointer");
	export default {
		name: "redrcd-charts",		
        data () {
            return {
                chart: {}
            }
        },
        props: ["options"],
        watch: {
            options: {
                handler (newV) {
                    this.chart.setOption(newV);
                },
                deep: true
            }
        },
        methods: {
            clickMethods() {
                let mChart = echarts.init(this.$refs.x_chart), _this = this;
                mChart.on('click', function (params) {
                    _this.$emit("chart-click", params);
                });
            }
        },
        mounted () {
            this.chart = echarts.init(this.$refs.x_chart);
            this.chart.setOption(this.options);
            this.clickMethods();
        }
	}
</script>
<style lang="scss" scoped></style>