<template>
    <div class="stackArea" style="width: 50%;height: 500px">
        <div id="chart" style="width: 100%;height: 500px"></div>
    </div>
</template>

<script>
    import {
      Chart} from '@antv/g2';

    const data = [
        {
      country: 'Asia', year: '1750', value: 502},
        {
      country: 'Asia', year: '1800', value: 635},
        {
      country: 'Asia', year: '1850', value: 809},
        {
      country: 'Asia', year: '1900', value: 5268},
        {
      country: 'Asia', year: '1950', value: 4400},
        {
      country: 'Asia', year: '1999', value: 3634},
        {
      country: 'Asia', year: '2050', value: 947},
        {
      country: 'Africa', year: '1750', value: 106},
        {
      country: 'Africa', year: '1800', value: 107},
        {
      country: 'Africa', year: '1850', value: 111},
        {
      country: 'Africa', year: '1900', value: 1766},
        {
      country: 'Africa', year: '1950', value: 221},
        {
      country: 'Africa', year: '1999', value: 767},
        {
      country: 'Africa', year: '2050', value: 133},
        {
      country: 'Europe', year: '1750', value: 163},
        {
      country: 'Europe', year: '1800', value: 203},
        {
      country: 'Europe', year: '1850', value: 276},
        {
      country: 'Europe', year: '1900', value: 628},
        {
      country: 'Europe', year: '1950', value: 547},
        {
      country: 'Europe', year: '1999', value: 729},
        {
      country: 'Europe', year: '2050', value: 408},
        {
      country: 'Oceania', year: '1750', value: 200},
        {
      country: 'Oceania', year: '1800', value: 200},
        {
      country: 'Oceania', year: '1850', value: 200},
        {
      country: 'Oceania', year: '1900', value: 460},
        {
      country: 'Oceania', year: '1950', value: 230},
        {
      country: 'Oceania', year: '1999', value: 300},
        {
      country: 'Oceania', year: '2050', value: 300},
    ];
    export default {
      
        name: "stackArea",
        data() {
      
            return {
      
                data,
                chart: undefined
            }
        },
        methods: {
      
            initChart() {
      
                let _this = this;
                _this.chart = new Chart({
      
                    container: 'chart',
                    autoFit: true,
                });

                _this.chart.data(data);
                _this.chart.scale('year', {
      
                    type: 'linear',
                    tickInterval: 50,
                });
                _this.chart.scale('value', {
      
                    nice: true,
                });

                _this.chart.tooltip({
      
                    showCrosshairs: true,
                    shared: true,
                });

                _this.chart.area()
                    .adjust('stack')
                    .position('year*value')
                    .shape('smooth')
                    .color('country');
                _this.chart.line()
                    .adjust('stack')
                    .position('year*value')
                    .shape('smooth')
                    .color('country');
                _this.chart.interaction('element-highlight');

                _this.chart.render();
            }
        },
        mounted() {
      
            let _this = this;
            _this.initChart();
            window.addEventListener('resize', function () {
      
                console.log('屏幕尺寸变化')
                if (_this.chart) {
      
                    _this.chart.render();
                } else {
      
                    _this.initChart();
                }
            });
        }
    }
</script>

<style scoped>
    .stackArea{
      
        margin: 0 auto;
    }
</style>