提交 | 用户 | age
|
8a1406
|
1 |
<template> |
V |
2 |
<div ref="chartRef" :style="{ height, width }"></div> |
|
3 |
</template> |
dc4b05
|
4 |
<script lang="ts"> |
C |
5 |
import { basicProps } from './props'; |
|
6 |
</script> |
45a8eb
|
7 |
<script lang="ts" setup> |
V |
8 |
import { onMounted, ref, Ref } from 'vue'; |
663d13
|
9 |
import { useECharts } from '/@/hooks/web/useECharts'; |
8a1406
|
10 |
|
45a8eb
|
11 |
defineProps({ |
V |
12 |
...basicProps, |
|
13 |
}); |
|
14 |
|
|
15 |
const chartRef = ref<HTMLDivElement | null>(null); |
|
16 |
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>); |
|
17 |
onMounted(() => { |
|
18 |
setOptions({ |
|
19 |
tooltip: { |
|
20 |
trigger: 'axis', |
|
21 |
axisPointer: { |
|
22 |
lineStyle: { |
|
23 |
width: 1, |
|
24 |
color: '#019680', |
8a1406
|
25 |
}, |
45a8eb
|
26 |
}, |
V |
27 |
}, |
|
28 |
grid: { left: '1%', right: '1%', top: '2 %', bottom: 0, containLabel: true }, |
|
29 |
xAxis: { |
|
30 |
type: 'category', |
dc4b05
|
31 |
data: [...new Array(12)].map((_item, index) => `${index + 1}月`), |
45a8eb
|
32 |
}, |
V |
33 |
yAxis: { |
|
34 |
type: 'value', |
|
35 |
max: 8000, |
|
36 |
splitNumber: 4, |
|
37 |
}, |
|
38 |
series: [ |
|
39 |
{ |
|
40 |
data: [3000, 2000, 3333, 5000, 3200, 4200, 3200, 2100, 3000, 5100, 6000, 3200, 4800], |
|
41 |
type: 'bar', |
|
42 |
barMaxWidth: 80, |
|
43 |
}, |
|
44 |
], |
|
45 |
}); |
8a1406
|
46 |
}); |
V |
47 |
</script> |