如何使用 Vuetify 迷你图组件生成超过 1 个迷你图？答案

【问题标题】：How to generate more than 1 sparkline with Vuetify sparkline component?如何使用 Vuetify 迷你图组件生成超过 1 个迷你图？
【发布时间】：2019-10-24 17:55:05
【问题描述】：

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>

【问题讨论】：

目前vuetify只支持一个数组格式的值，如果我们添加二维数组，它不会接受，你可以尝试vue图表js库来实现同样的效果

标签： javascript vue.js vuetify.js

【解决方案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>

【讨论】：