1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
| <template>
| <div class="chart-wrapper">
| <v-chart :option="option" :loading="isLoading" autoresize />
| </div>
| </template>
|
| <script setup lang="ts">
| import * as echarts from 'echarts/core';
| import vChart from 'vue-echarts';
| import { BarChart, LineChart } from 'echarts/charts';
| import {
| TitleComponent,
| TooltipComponent,
| GridComponent,
| // 数据集组件
| DatasetComponent,
| // 内置数据转换器组件 (filter, sort)
| TransformComponent,
| } from 'echarts/components';
| import { LabelLayout, UniversalTransition } from 'echarts/features';
| import { CanvasRenderer } from 'echarts/renderers';
| import type {
| // 系列类型的定义后缀都为 SeriesOption
| BarSeriesOption,
| LineSeriesOption,
| } from 'echarts/charts';
| import type {
| // 组件类型的定义后缀都为 ComponentOption
| TitleComponentOption,
| TooltipComponentOption,
| GridComponentOption,
| DatasetComponentOption,
| } from 'echarts/components';
| import type { ComposeOption } from 'echarts/core';
| import { useInsuranceClaimYearMonthCountCount } from '../hooks';
| import dayjs from 'dayjs';
|
| // 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
| type ECOption = ComposeOption<
| | BarSeriesOption
| | LineSeriesOption
| | TitleComponentOption
| | TooltipComponentOption
| | GridComponentOption
| | DatasetComponentOption
| >;
|
| // 注册必须的组件
| echarts.use([
| TitleComponent,
| TooltipComponent,
| GridComponent,
| DatasetComponent,
| TransformComponent,
| BarChart,
| LineChart,
| LabelLayout,
| UniversalTransition,
| CanvasRenderer,
| ]);
|
| defineOptions({
| name: 'Chart',
| });
|
| const { claimYearMonthCountList, isLoading } = useInsuranceClaimYearMonthCountCount({
| year: dayjs().year(),
| });
| console.log('claimYearMonthCountList: ', claimYearMonthCountList);
|
| const option = computed<ECOption>(() => ({
| xAxis: {
| data: claimYearMonthCountList.value.map((item) => `${item.year}年${item.month}月`),
| axisLabel: {
| rotate: 45,
| },
| },
| yAxis: {
| minInterval: 1,
| },
| grid: {
| left: '5%',
| right: '5%',
| top: '5%',
| },
| tooltip: {
| trigger: 'item',
| formatter: '{b}: {c}人',
| },
| series: [
| {
| data: claimYearMonthCountList.value.map((x) => x.count),
| type: 'line',
| label: {
| show: true,
| },
| // areaStyle: {
| // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
| // {
| // offset: 0,
| // color: 'rgba(58,77,233,0.8)',
| // },
| // {
| // offset: 1,
| // color: 'rgba(58,77,233,0.3)',
| // },
| // ]),
| // },
| },
| ],
| }));
| </script>
|
| <style lang="scss" scoped>
| @use '@/style/common.scss' as *;
|
| .chart-wrapper {
| flex: 1;
| min-width: 0;
| }
| </style>
|
|
