index.vue
2.61 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
<template>
<div>
<n-grid :x-gap="12" :cols="3" layout-shift-disabled>
<n-grid-item>
<svg :width="w" :height="h">
<polyline :stroke="colorLefts[0]" stroke-width="2" fill="transparent"
:points="`${xFalsePos(0)}, 0 ${xFalsePos(30)}, ${h / 2}`" />
<polyline :stroke="colorLefts[0]" stroke-width="2" fill="transparent" :points="`${xFalsePos(20)}, 0 ${xFalsePos(50)}, ${h / 2} ${xFalsePos(w)}, ${h / 2
}`" />
<polyline :stroke="colorLefts[1]" fill="transparent" stroke-width="3"
:points="`${xFalsePos(0)}, ${h - 3}, ${xFalsePos(200)}, ${h - 3}`" />
</svg>
</n-grid-item>
<n-grid-item>
<!-- <div style="width:300px;height: 30px"></div>-->
</n-grid-item>
<n-grid-item>
<!-- <svg :width="w" :height="h">-->
<!-- <polyline-->
<!-- :stroke="colorRights[0]"-->
<!-- stroke-width="2"-->
<!-- fill="transparent"-->
<!-- :points="`${xPos(0)}, 0 ${xPos(30)}, ${h / 2}`"-->
<!-- />-->
<!-- <polyline-->
<!-- :stroke="colorRights[0]"-->
<!-- stroke-width="2"-->
<!-- fill="transparent"-->
<!-- :points="`${xPos(20)}, 0 ${xPos(50)}, ${h / 2} ${xPos(w)}, ${-->
<!-- h / 2-->
<!-- }`"-->
<!-- />-->
<!-- <polyline-->
<!-- :stroke="colorRights[1]"-->
<!-- fill="transparent"-->
<!-- stroke-width="3"-->
<!-- :points="`${xPos(0)}, ${h - 3}, ${xPos(200)}, ${h - 3}`"-->
<!-- />-->
<!-- </svg>-->
</n-grid-item>
</n-grid>
</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
}
})
//默认设置宽高距离位置
// props.chartConfig.attr.w = 1920
// props.chartConfig.attr.h = 148
// props.chartConfig.attr.x = 0
// props.chartConfig.attr.y = 0
const { w, h } = toRefs(props.chartConfig.attr)
const { colorLefts, colorRights, reverse, defaultReverse } = toRefs(props.chartConfig.option)
const xPos = (pos: number) => {
if (!reverse.value) return pos
return w.value - pos
}
const xFalsePos = (pos: number) => {
if (!defaultReverse.value) return pos
return w.value - pos
}
</script>
<style lang="scss" scoped>
</style>