<template>
	<v-chart class="chart" :option="option" autoresize />
</template>
<script setup lang="ts">
import { use } from 'echarts/core'
import { LineChart } from 'echarts/charts'
import { CanvasRenderer } from 'echarts/renderers'
import {
	TitleComponent,
	TooltipComponent,
	LegendComponent,
	GridComponent,
	AxisPointerComponent,
} from 'echarts/components'
import VChart from 'vue-echarts'
use([
	CanvasRenderer,
	LineChart,
	TitleComponent,
	TooltipComponent,
	LegendComponent,
	GridComponent,
	AxisPointerComponent,  // 如果需要显示坐标轴指示器，也可以导入
])
const option = ref<any>({
	title: {
		text: 'Traffic Trend Over Time',
		left: 'center',
	},
	tooltip: {
		trigger: 'axis',
	},
	legend: {
		data: ['Traffic'],
		left: 'left',
	},
	grid: {
		left: '10%',
		right: '10%',
		bottom: '10%',
		containLabel: true,  // 包含标签
	},
	xAxis: {
		type: 'category',
		data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
	},
	yAxis: {
		type: 'value',
	},
	series: [
		{
			name: 'Traffic',
			type: 'line',  // 设置图表类型为折线图
			data: [820, 932, 901, 934, 1290, 1330, 1320, 1010, 1100, 1230, 1300, 1420],
			itemStyle: {
				color: '#66b3ff',
			},
			lineStyle: {
				width: 2,
			},
			smooth: true, // 平滑曲线
			areaStyle: { // 添加面积背景色
				origin: 'start',
				color: 'rgba(102, 179, 255, 0.2)',
			},
		},
	],
})
</script>

<style>
.chart {
	width: 100%;
	height: 100%;
}
</style>
