index.vue
3.19 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
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
<template>
<div class="go-content-box">
<svg :width="w" :height="h" fill="none">
<defs xmlns="http://www.w3.org/2000/svg">
<linearGradient id="title2_0" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
<stop offset="0" :stop-color="attribute.linearColors[0]" stop-opacity="1" />
<stop offset="1" :stop-color="attribute.linearColors[1]" stop-opacity="1" />
</linearGradient>
<linearGradient id="title2_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
<stop offset="0" :stop-color="attribute.linearColors[3]" stop-opacity="1" />
<stop offset="1" :stop-color="attribute.linearColors[4]" stop-opacity="0" />
</linearGradient>
</defs>
<g opacity="1" transform="translate(0 0) rotate(0 160 15)">
<path
id="矩形 title2_u"
fill-rule="evenodd"
fill="url(#title2_0)"
transform="translate(0 0) rotate(0 160 15)"
opacity="1"
:d="`M2.77,${h} L${w},${h} L${w},0 L${
w - 11.44
},0 C10.58,0 9.81,0.55 9.54,1.37 L0.88,27.37 C0.68,27.98 0.78,28.65 1.15,29.17 C1.53,29.69 2.13,30 2.77,30 Z `"
/>
<path
id="矩形 title2_u"
style="stroke: url(#title2_1); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
transform="translate(0 0) rotate(0 160 15)"
:d="`M2.77,${h} L${w},${h} L${w},0 L11.44,0 C10.58,0 9.81,0.55 9.54,1.37 L0.88,27.37 C0.68,27.98 0.78,28.65 1.15,29.17 C1.53,29.69 2.13,30 2.77,30 Z `"
/>
<g opacity="1" :transform="`translate(24 ${h / 2 - 26 / 2}) rotate(0 46 13)`">
<text>
<tspan
:x="attribute.fontPos.x"
:y="attribute.fontPos.y"
:font-size="attribute.fontSize"
line-height="0"
:fill="attribute.fontColor"
opacity="1"
font-family="YouSheBiaoTiHei"
letter-spacing="0"
>
{{ dataset }}
</tspan>
</text>
</g>
<path
id="矩形 title2_d"
fill-rule="evenodd"
:style="{ fill: attribute.linearColors[4] }"
:transform="`translate(9 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`"
opacity="1"
d="M0,15L2,15L7,0L5,0L0,15Z "
/>
<path
id="矩形 title2_d"
fill-rule="evenodd"
:style="{ fill: attribute.linearColors[5] }"
:transform="`translate(15 ${h / 2 - 15 / 2}) rotate(0 3.5 7.5)`"
opacity="1"
d="M0,15L2,15L7,0L5,0L0,15Z "
/>
</g>
</svg>
</div>
</template>
<script setup lang="ts">
import { PropType, toRefs } from 'vue'
import { CreateComponentType } from '@/packages/index.d'
const props = defineProps({
chartConfig: {
type: Object as PropType<CreateComponentType>,
required: true
}
})
const { dataset, attribute } = toRefs(props.chartConfig.option)
const { w, h } = toRefs(props.chartConfig.attr)
</script>
<style lang="scss" scoped>
.go-content-box {
width: v-bind('w+"px"');
height: v-bind('h+"px"');
display: flex;
align-items: center;
justify-content: center;
}
</style>