<template>
	<div class="chart-container" ref="chartRef"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'

const chartRef = ref(null)
let chartInstance = null
const fetchData = async () => {
	try {
		// 使用 axios 请求数据
		const response = await adminRequest.get('/sys/item/view')  // 修改为你自己的 API URL
		const data = response.data  // 假设返回的数据是一个数组，格式类似于：[{ name: 'A', value: 100 }, ...]

		// 更新图表配置
		const options = {

			xAxis: {
				type: 'category',
				data: data.map((item) => item.year),
			},
			yAxis: {
				type: 'value',
			},
			series: [
				{
					data: data.map((item) => item.count),
					type: 'line',
				},
			],
		}

		// 设置图表配置项
		chartInstance.setOption(options)
	} catch (error) {
		console.error('数据请求失败:', error)
	}
}

onMounted(() => {
	chartInstance = echarts.init(chartRef.value)
	// 调用 fetchData 获取数据并更新图表
	fetchData()
})
onUnmounted(() => {
	if (chartInstance) {
		chartInstance.dispose()
		chartInstance = null
	}
})
</script>

<style scoped>
.chart-container {
	width: 100%;
	height: 300px;
}
</style>
