<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: '1%',
      right: '5%',
      textStyle: {
        color: '#ccc',
      },
    },
    grid: {
      top: '8%',
      bottom: '80px',
    },
    color: ['#3E74FF', '#DC4F4E', '#3DB87B'],
    // dataset: {
    //   source: [
    //     ['date', '全景课堂', '资源包', '自由结对'],
    //     ['12-11', 15, 8, 11],
    //     ['12-11', 32, 18, 23],
    //     ['12-11', 45, 24, 33],
    //     ['12-11', 101, 67, 86],
    //     ['12-11', 122, 83, 64],
    //     ['12-11', 162, 95, 60],
    //     ['12-11', 201, 122, 147],
    //   ],
    // },
    xAxis: {
      type: 'category',
      // axisLabel: { interval: 0, rotate: -20 },
      axisLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#ccc',
        },
      },
      boundaryGap: false,
      data: ['12-11', '12-11', '12-11', '12-11', '12-11', '12-11', '12-11', '12-11'],
    },
    yAxis: {
      type: 'value',
      // interval: 10,
      axisLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#ccc',
        },
      },
      splitLine: {
        show: true,
        lineStyle: {
          type: 'dashed',
          color: '#ccc',
        },
      },
    },
    series: [
      { type: 'line', name: '总用户', smooth: true, symbolSize: 12, itemStyle: { borderWidth: 2 }, lineStyle: { width: 6 }, data: [42, 46, 51, 53, 57, 61, 73, 71, 81], areaStyle: { opacity: 0.2 } },
      { type: 'line', name: '教师', smooth: true, symbolSize: 12, itemStyle: { borderWidth: 2 }, lineStyle: { width: 6 }, data: [14, 26, 39, 43, 55, 57, 61, 69, 63], areaStyle: { opacity: 0.2 } },
      { type: 'line', name: '学生', smooth: true, symbolSize: 12, itemStyle: { borderWidth: 2 }, lineStyle: { width: 6 }, data: [19, 23, 28, 32, 37, 42, 44, 51, 66], areaStyle: { opacity: 0.2 } },
    ],

  })
})
</script>

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