index.vue
1.4 KB
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
<script setup lang="ts">
import { onMounted, ref, unref } from 'vue'
import type { ECharts, EChartsOption } from 'echarts'
import { init } from 'echarts'
const firstScreenElRef = ref()
const instance = ref<ECharts>()
const options: EChartsOption = {
graphic: {
elements: [
{
type: 'text',
left: 'center',
top: 'center',
style: {
text: 'Apache ECharts',
fontSize: 80,
fontWeight: 'bold',
lineDash: [0, 200],
lineDashOffset: 0,
fill: 'transparent',
stroke: '#000',
lineWidth: 1,
},
keyframeAnimation: {
duration: 3000,
loop: true,
keyframes: [
{
percent: 0.7,
style: {
fill: 'transparent',
lineDashOffset: 200,
lineDash: [200, 0],
},
},
{
// Stop for a while.
percent: 0.8,
style: {
fill: 'transparent',
},
},
{
percent: 1,
style: {
fill: 'black',
},
},
],
},
},
],
},
}
onMounted(() => {
instance.value = init(unref(firstScreenElRef), options)
})
</script>
<template>
<div ref="firstScreenElRef" class="w-full h-full" />
</template>