index.vue
4.76 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
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
122
123
124
125
126
127
128
129
<template>
<div class="go-content-box">
<svg :width="w" :height="h" fill="none">
<defs>
<linearGradient id="linear_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="linear_1" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
<stop offset="0" :stop-color="attribute.linearColors[2]" stop-opacity="1" />
<stop offset="1" :stop-color="attribute.linearColors[3]" stop-opacity="0" />
</linearGradient>
<linearGradient id="linear_2" x1="0%" y1="50%" x2="100%" y2="50%" gradientUnits="objectBoundingBox">
<stop offset="0" :stop-color="attribute.linearColors[4]" stop-opacity="1" />
<stop offset="1" :stop-color="attribute.linearColors[5]" stop-opacity="0" />
</linearGradient>
</defs>
<g opacity="1" transform="translate(-6.249999273677531e-8 0.5) rotate(0 160.00000003125 15.000000000000005)">
<path
id="矩形 16"
fill-rule="evenodd"
fill="url(#linear_0)"
transform="translate(6.249999895402425e-8 2) rotate(0 160 13)"
opacity="1"
:d="`M0,${h - 5} L${w},${h - 5} L${w},0 L0,0 L0,${h - 5} Z`"
/>
<g opacity="1" :transform="`translate(34.0000000625 ${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="路径 5"
style="stroke: url(#linear_1); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
transform="translate(6.249999895402425e-8 30) rotate(0 160 0)"
d="M0,0L320,0 "
/>
<path
id="路径 5"
style="stroke: url(#linear_2); stroke-width: 1; stroke-opacity: 100; stroke-dasharray: 0 0"
transform="translate(6.249999895402425e-8 0) rotate(0 160 0)"
d="M0,0L320,0 "
/>
<path
id="路径 5"
:style="{ stroke: attribute.linearColors[10], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
transform="translate(0 0.0005) rotate(0 2.000000062499999 0)"
d="M0,0L4,0 "
/>
<path
id="路径 5"
:style="{ stroke: attribute.linearColors[11], strokeWidth: 1, strokeOpacity: 1, strokeDasharray: 0 }"
:transform="`translate(0 ${h - 1}) rotate(0 2.000000062499999 0)`"
d="M0,0 L4,0 "
/>
<g opacity="1" :transform="`translate(10.0000000625 ${h / 2 - 18 / 2}) rotate(0 8.598076211353316 9)`">
<path
id="三角形 1"
fill-rule="evenodd"
:style="{ fill: attribute.linearColors[6] }"
transform="translate(4 0) rotate(0 6.598076211353316 4.5)"
opacity="1"
d="M2.8,9L13.2,9L0,0L2.8,9Z "
/>
<path
id="三角形 1"
fill-rule="evenodd"
:style="{ fill: attribute.linearColors[7] }"
transform="translate(4 9) rotate(0 6.598076211353316 4.5)"
opacity="1"
d="M13.2,0L2.8,0L0,9L13.2,0Z "
/>
<path
id="圆形 7"
fill-rule="evenodd"
:style="{ fill: attribute.linearColors[8] }"
transform="translate(0 7) rotate(0 2 2)"
opacity="1"
d="M2,0C0.9,0 0,0.9 0,2C0,3.1 0.9,4 2,4C3.1,4 4,3.1 4,2C4,0.9 3.1,0 2,0Z "
/>
</g>
<path
id="矩形 17"
fill-rule="evenodd"
:style="{ fill: attribute.linearColors[9] }"
transform="translate(6.249999895402425e-8 2) rotate(0 0.5 13)"
opacity="1"
:d="`M0,${h - 5}L1,${h - 5}L1,0L0,0L0,${h - 5}Z`"
/>
</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>