<template>
  <div class="flex flex-col items-center justify-center w-full">
    <el-statistic :title="title" :value="98500"> </el-statistic>
    <v-chart ref="saleChartRef" :style="{ height: height }" :option="options" />
  </div>
</template>
<script setup>
  import VChart from 'vue-echarts';
  import { use } from 'echarts/core';
  import { CanvasRenderer } from 'echarts/renderers';
  import { LineChart } from 'echarts/charts';
  import {
    GridComponent,
    TooltipComponent,
    LegendComponent,
    ToolboxComponent
  } from 'echarts/components';
  import { Top, Bottom } from '@element-plus/icons-vue';

  const props = defineProps({
    title: {
      type: String,
      default: '统计'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '120px'
    }
  });
  // 按需加载echarts
  use([
    CanvasRenderer,
    LineChart,
    GridComponent,
    TooltipComponent,
    LegendComponent
  ]);

  const options = reactive({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      show: false,
      data: ['新增用户数']
    },
    grid: {
      left: '2%',
      right: '2%',
      bottom: '2%',
      top: '10%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: props.title,
        type: 'line',
        data: [120, 132, 234, 134, 90],
        smooth: true
      }
    ]
  });
</script>
