<script setup lang="ts">
import * as echarts from 'echarts'

const chartRef = ref()
onMounted(() => {
  echarts.init(chartRef.value).setOption({
    title: {
      text: '学生作品情况',
      textStyle: {
        color: '#fff',
      },
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '5%',
      right: '5%',
      textStyle: {
        color: '#ccc',
      },
    },
    grid: {
      bottom: '10%',
    },
    color: ['#11a597', '#ff8366', '#5f54ef'],
    dataset: {
      source: [
        ['date', '学生作品总数', '五星作品数', '线上作品数'],
        ['2021年12月', 15, 8, 11],
        ['2022年1月', 32, 18, 23],
        ['2022年2月', 45, 24, 33],
        ['2022年3月', 101, 67, 86],
        ['2022年4月', 122, 83, 64],
        ['2022年5月', 162, 95, 60],
        ['2022年6月', 201, 122, 147],
        ['2022年7月', 0, 0, 0],
        ['2022年8月', 0, 0, 0],
        ['2022年9月', 172, 81, 97],
        ['2022年10月', 263, 170, 187],
        ['2022年11月', 0, 0, 0],
        ['2022年12月', 0, 0, 0],
      ],
    },
    xAxis: {
      type: 'category',
      axisLabel: { interval: 0, rotate: -20 },
      axisLine: {
        show: true,

        lineStyle: {
          type: 'dashed',
          color: '#ccc',
        },
      },
    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#ccc',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#ccc',
        },
      },
    },
    // Declare several bar series, each will be mapped
    // to a column of dataset.source by default.
    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }],

  })
})
</script>

<template>
  <div ref="chartRef" class="w-full h-full " />
</template>
