<template>
  <v-chart ref="saleChartRef" style="height: 350px" :option="options" />
</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';

  // 按需加载echarts
  use([
    CanvasRenderer,
    LineChart,
    GridComponent,
    TooltipComponent,
    LegendComponent
  ]);

  const options = reactive({
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['新增用户', '活跃用户'],
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7日']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '新增用户',
        type: 'line',
        data: [120, 132, 234, 134, 90, 230, 210],
        smooth: true
      },
      {
        name: '活跃用户',
        type: 'line',
        data: [220, 182, 101, 134, 90, 120, 310],
        smooth: true
      }
    ]
  });
</script>
