<template>
    <!--    <div class="mta-eChart-table-expand">-->
    <div id="nestedPiesChart" ref="echartDiv" :style="styleStr"></div>
    <!--    </div>-->
</template>

<script>
    import * as HttpTongji     from '@/api/statistics.js';
    import { getStringByHtml } from '@/utils/common';

    export default {
        name:    'eChartTableExpand',
        props:   {
            MyId:     {
                type:     Number,
                required: true,
            },
            /*option: {
                type: Object,
                require: true
            },*/
            styleStr: {
                type: String,
                // default: `width: 100%; height: 100%`
            },
        },
        data() {
            return {
                nestedPiesChart: '',
                isFirstGetData:  true,
                option: null,
            };
        },
        methods: {
            // ***************** eChart **************
            drawEchart(option) {
                const that = this;
                this.option = option;
                this.nestedPiesChart = that.$echarts.init(that.$refs.echartDiv);
                this.nestedPiesChart.setOption(option);
                this.nestedPiesChart.on('click', function (params) {
                    that.$emit('eChartClick', params);
                });
                this.resizeEchart();
            },
            resizeEchart() {
                this.nestedPiesChart.resize();
            },
            getEchartData() {
                const opt = {
                    ksId: this.MyId,
                };
                this.$emit('data', opt);
            },
        },
        watch:   {
            styleStr: function (newVal, oldVal) {
                this.resizeEchart();
            },
        },
        mounted() {
            // this.drawEchart(this.option);
            window.onresize = () => {
                return (() => {
                    this.$nextTick(() => {
                        this.resizeEchart();
                    });
                })();
            };
        },
    };
</script>

