<template>
    <div class = "div01">
        <h2>Echart02区域</h2>
        <button class="btn02" @click="Click01()">按钮</button>
        <br>
        <button class="btn03" :disabled="isButtonDisabled">Button</button>
        <h1>{{ Obj.id }}</h1>
        <div id="echart02" style="width: 600px;height:400px;"></div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
//Vue.prototype.$echarts = echarts;

export default {
    name: 'Echarts',
    data() {
        return {
            count: 1,
            msg: "MSG",
            Obj: {
                id: 1,
                name: "ABC",
            },
            isButtonDisabled: true,
            option01: {
                title: {
                    text: 'ECharts 测试表'
                },
                tooltip: {},
                legend: {
                    data: ['点击次数']
                },
                xAxis: {
                    data: ["点击上限", "点击次数"]
                },
                yAxis: {},
                series: [{
                    name: '次数',
                    type: 'bar',
                    data: [20, 1]
                }]
            },
        }
    },
    methods: {
        myEcharts() {
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById('echart02'));
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(this.option01, true);
        },
        Click01() {
            if (this.count < 20) {
                this.count++;
            }
            else {
                this.count = 0;
            }
            this.Obj.id = this.count;
            this.isButtonDisabled = !this.isButtonDisabled;
            // chart.setOption(option, notMerge, lazyUpdate);
            this.option01.series[0].data = [20, this.count];
            this.myEcharts();
        },
        refreshData() {
            //刷新数据
            var chart = echarts.getInstanceByDom(document.getElementById("echart02"));
            var option = chart.getOption();
            var c = this.count;
            option.series[0].data = [20, c];
            chart.setOption(option);
        }
    },
    mounted() {
        this.myEcharts();
        // $(function () {
        //     if (!this.myChart) {
        //         // 创建图表方法
        //         this.myEcharts();
        //     } else {
        //         //更新series方法
        //         this.refreshData();
        //     }
        // })
    },
}
</script>

<style scoped>
.div01{
    background-color: darkgrey;
}
.btn02{
    width: 150px;
    height: 40px;
    background-color: rgb(126, 87, 87);
}
.btn03{
    width: 150px;
    height: 40px;
}
</style>
  

// import './assets/main.css'

// import Vue from 'vue'
import { createApp } from 'vue'

// import App from './App.vue'
// createApp(App).mount('#app')

// //引入图表
// import * as echarts from 'echarts';
// Vue.prototype.$echarts = echarts;

//引入Element
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css'


import ATest from './ATest.vue'
var app = createApp(ATest)

app.use(ElementPlus);

app.mount('#atest')

// import Test01 from './components/Test01.vue'
// createApp(Test01).mount('#test01')

// import Echart01 from './components/Echart01.vue'
// createApp(Echart01).mount('#echart01')

<template>
    <div  class="div01">
        <h2>datatable01区域</h2>
        <br>
        <button class="btn02" @click="Click01()">按钮</button>
        <br>
        <br>
        <br>
        <el-container>
            <el-table id="datatable01" class="datatable01" :data="tableData">
                <el-table-column prop="date" label="Date" width="180" />
                <el-table-column prop="name" label="Name" width="180" />
                <el-table-column prop="address" label="Address" />
            </el-table>
        </el-container>
    </div>
</template>
  

<script>

export default {
    name: 'DataTable',
    data() {
        return {
            count: 1,
            messsage: "MSG",
            isButtonDisabled: true,
            tableData: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ]
        }
    },

    methods: {
        DataTableFresh() {
            // 基于准备好的dom，初始化datatable01实例
            var table = document.getElementById('datatable01');

            // 使用刚指定的配置项和数据显示图表。


        },

        Click01() {
            if (this.count < 20) {
                this.count++;
            }
            else {
                this.count = 0;
            }

            this.isButtonDisabled = !this.isButtonDisabled;

            this.DataTableFresh();
        },

    },

    mounted() {
        this.DataTableFresh();
    },

}
</script>
  
<style scoped>
.div01 {
    width: 95%;
    height: 600px;
    background-color: rgb(193, 228, 236);
}

.btn02 {
    width: 150px;
    height: 40px;
    background-color: rgb(126, 87, 87);
}

.datatable01 {
    width: 60%;

}
</style>