<template>
  <ai-list class="list">
    <ai-title
      slot="title"
      title="数据统计"
      isShowBottomBorder>
    </ai-title>
    <template slot="content">
      <ai-card title="数据统计">
        <div id="chart1"></div>
      </ai-card>
    </template>
  </ai-list>
</template>

<script>
  import { Line } from '@antv/g2plot'
  import {sendChromeAPIMessage} from '@/api/chromeApi'

  export default {
    name: 'ExportSaleData',

    data () {
      return {
      }
    },

    mounted () {
      this.$nextTick(() => {
        this.initChart1()
      })
    },

    methods: {
      initChart1 () {
        const data = [
          { year: '1991', value: 3 },
          { year: '1992', value: 4 },
          { year: '1993', value: 3.5 },
          { year: '1994', value: 5 },
          { year: '1995', value: 4.9 },
          { year: '1996', value: 6 },
          { year: '1997', value: 7 },
          { year: '1998', value: 9 },
          { year: '1999', value: 13 }
        ]

        const line = new Line('chart1', {
          data,
          xField: 'year',
          yField: 'value',
        });

        line.render();
      }
    }
  }
</script>

<style scoped lang="scss">
  .list {
    ::v-deep .ai-list__content .ai-list__content--right-wrapper {
      border-radius: 0;
      padding: 0!important;
      box-shadow: none;
      background: transparent;
    }
  }
</style>
