Vuetify具有迷你图组件,可用于创建简单图形。 https://vuetifyjs.com/en/components/sparklines
我不知道如何在同一张图中添加多个迷你图。类似于向组件添加第二个值列表。
如果没有办法,也许有些人知道我可以在Vue中使用的更合适的图形工具。
<template>
<v-sparkline
:value="value"
:gradient="gradient"
:smooth="radius || false"
:padding="padding"
:line-width="width"
:stroke-linecap="lineCap"
:gradient-direction="gradientDirection"
:fill="fill"
:type="type"
:auto-line-width="autoLineWidth"
auto-draw
></v-sparkline>
</template>
<script>
const gradients = [
['#222'],
['#42b3f4'],
['red', 'orange', 'yellow'],
['purple', 'violet'],
['#00c6ff', '#F0F', '#FF0'],
['#f72047', '#ffd200', '#1feaea'],
]
export default {
data: () => ({
width: 2,
radius: 10,
padding: 8,
lineCap: 'round',
gradient: gradients[5],
value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
gradientDirection: 'top',
gradients,
fill: false,
type: 'trend',
autoLineWidth: false,
}),
}
</script>
答案 0 :(得分:1)
在下面的代码中,第一个 sparkline
通常附加到 v-sheet
,而第二个堆叠在第一个 sparkline
的顶部。
<template>
<v-sheet class="stackSheet" color="white">
<v-sparkline
:value="value1"
color="blue"
line-width="3"
padding="10"
></v-sparkline>
<v-sparkline
class="stackSpark"
:value="value2"
color="red"
line-width="3"
padding="10"
></v-sparkline>
</v-sheet>
</template>
<script>
export default {
data: () => ({
value1: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
value2: [7, 4, 7, 2, 9, 0, 1, 2, 4, 7, 7, 10, 1, 3, 5],
}),
}
</script>
<style lang="css" scoped>
.stackSheet {
position: relative;
}
.stackSpark {
position: absolute;
top: 0;
left: 0;
}
</style>