<!--
 * @Author: your name
 * @Date: 2021-10-14 13:08:10
 * @LastEditTime: 2021-11-10 15:16:30
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/components/v-echars-map/index.vue
-->
<template>
    <div class="echars-map-cont" ref="mapChart">
    </div>
</template>

<script>
import * as echarts from "echarts";
import { createMap } from "@/api/getMap"
export default {
    name: "v-echars-map",
    props: {
        opt: {
            type: Object,
            default: () => {
                return {};
            },
        },
        name: {
            type: String,
            default: 'china'
        }
    },
    watch: {
        opt: {
            handler(val) {
                if (JSON.stringify(val) != "{}") {
                    this.$nextTick(() => {
                        if (!this.myChart) {
                            this.drawFun(val);
                        } else {
                            this.myChart.setOption(val);
                        }
                        this.$emit("echarsUpdate", this.myChart);
                    });
                }
            },
            immediate: true,
        },
    },
    data() {
        return {
            myChart: null,
        };
    },
    methods: {
        drawFun(opt) {
            createMap(this.name).then(res => {
               echarts.registerMap(this.name, res.data)
               let eRef = this.$refs.mapChart;
                this.myChart = echarts.init(eRef);
                this.myChart.setOption(opt);
            })
            
        },
    },
};
</script>

<style lang="less" scoped>
.echars-map-cont {
    width: 100%;
    height: 100%;
}
</style>
