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

const chartRef = ref()
onMounted(() => {
  echarts.init(chartRef.value).setOption({
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '1%',
      right: '5%',
      textStyle: {
        color: '#ccc',
      },
    },
    grid: {
      top: '8%',
      bottom: '80px',
    },
    color: ['#7D7CFC', '#0293FD'],
    dataset: {
      source: [
        ['date', '浏览量', '点赞量'],
        ['名师资源', 1080, 2800],
        ['名师在线', 2060, 2100],
        ['直播课程', 2800, 1800],
        ['家庭教育', 2600, 1800],
        ['特色课程', 3100, 11000],
        ['作业辅导', 3000, 1000],
      ],
    },
    xAxis: {
      type: 'category',
      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' }],

  })
})
</script>

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