| | |
| | | <script setup> |
| | | import { getEventTrend } from '@/api/home/event' |
| | | import * as echarts from 'echarts' |
| | | import useEchartsResize from '@/hooks/useEchartsResize' |
| | | |
| | | const echartsRef = ref(null) |
| | | let chart = null |
| | | let { chart } = useEchartsResize(echartsRef) |
| | | |
| | | const echartsOption = { |
| | | tooltip: { |
| | |
| | | emphasis: { |
| | | focus: 'series', |
| | | }, |
| | | areaStyle: { |
| | | color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ |
| | | { |
| | | offset: 0, |
| | | color: 'rgba(24, 141, 240, 0.4)', // 顶部颜色 |
| | | }, |
| | | { |
| | | offset: 1, |
| | | color: 'rgba(24, 141, 240, 0)', // 底部颜色 |
| | | }, |
| | | ]), |
| | | }, |
| | | data: [], // 示例数据,根据实际完成率计算 |
| | | }, |
| | | } |
| | |
| | | const list = res?.data?.data || [] |
| | | echartsOption.xAxis.data = list.map(item => item.name) |
| | | echartsOption.series.data = list.map(item => item.value) |
| | | chart.setOption(echartsOption) |
| | | chart.value.setOption(echartsOption) |
| | | } |
| | | |
| | | onMounted(() => { |
| | | chart = echarts.init(echartsRef.value) |
| | | window.addEventListener('resize', chart.resize) |
| | | getData() |
| | | }) |
| | | </script> |