迷你图表

迷你图表组件可以用来创建简单的图形，比如 GitHub 的贡献图。

除了下面列出的以外，还可以使用任何 SVG attribute

用例

迷你图表是一个提供数据可视化表示的小图表。

template script

  1. <template>
  2.   <v-sparkline
  3.     :value="value"
  4.     :gradient="gradient"
  5.     :smooth="radius || false"
  6.     :padding="padding"
  7.     :line-width="width"
  8.     :stroke-linecap="lineCap"
  9.     :gradient-direction="gradientDirection"
  10.     :fill="fill"
  11.     :type="type"
  12.     :auto-line-width="autoLineWidth"
  13.     auto-draw
  14.   ></v-sparkline>
  15. </template>
  1. <script>
  2.   const gradients = [
  3.     ['#222'],
  4.     ['#42b3f4'],
  5.     ['red', 'orange', 'yellow'],
  6.     ['purple', 'violet'],
  7.     ['#00c6ff', '#F0F', '#FF0'],
  8.     ['#f72047', '#ffd200', '#1feaea'],
  9.   ]
  11.   export default {
  12.     data: () => ({
  13.       width: 2,
  14.       radius: 10,
  15.       padding: 8,
  16.       lineCap: 'round',
  17.       gradient: gradients[5],
  18.       value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
  19.       gradientDirection: 'top',
  20.       gradients,
  21.       fill: false,
  22.       type: 'trend',
  23.       autoLineWidth: false,
  24.     }),
  25.   }
  26. </script>

Sparklines（迷你图表） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Sparklines（迷你图表） - 图2

实战场

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-sparkline
  4.       :value="value"
  5.       :gradient="gradient"
  6.       :smooth="radius || false"
  7.       :padding="padding"
  8.       :line-width="lineWidth"
  9.       :stroke-linecap="lineCap"
  10.       :gradient-direction="gradientDirection"
  11.       :fill="fill"
  12.       :type="type"
  13.       :auto-line-width="autoLineWidth"
  14.       auto-draw
  15.       :show-labels="showLabels"
  16.       :label-size="labelSize"
  17.     ></v-sparkline>
  19.     <v-divider></v-divider>
  21.     <v-row>
  22.       <v-col cols="12">
  23.         <v-row class="fill-height" align="center">
  24.           <v-subheader class="pl-0">Type</v-subheader>
  25.           <v-btn-toggle v-model="type" mandatory>
  26.             <v-btn small text value="bar">bar</v-btn>
  27.             <v-btn small text value="trend">trend</v-btn>
  28.           </v-btn-toggle>
  29.         </v-row>
  30.       </v-col>
  32.       <v-col cols="12" md="6">
  33.         <v-row class="fill-height" align="center">
  34.           <v-subheader class="pl-0">Gradient</v-subheader>
  35.           <v-item-group v-model="gradient" mandatory>
  36.             <v-row>
  37.               <v-item
  38.                 v-for="(gradient, i) in gradients"
  39.                 :key="i"
  40.                 v-slot:default="{ active, toggle }"
  41.                 :value="gradient"
  42.               >
  43.                 <v-card
  44.                   :style="{
  45.                     background: gradient.length > 1
  46.                       ? `linear-gradient(0deg, ${gradient})`
  47.                       : gradient[0],
  48.                     border: '2px solid',
  49.                     borderColor: active ? '#222' : 'white'
  50.                   }"
  51.                   width="30"
  52.                   height="30"
  53.                   class="mr-2"
  54.                   @click.native="toggle"
  55.                 ></v-card>
  56.               </v-item>
  57.             </v-row>
  58.           </v-item-group>
  59.         </v-row>
  60.       </v-col>
  62.       <v-col cols="12" md="6">
  63.         <v-row class="fill-height" align="center">
  64.           <v-subheader class="pl-0">Gradient direction</v-subheader>
  65.           <v-btn-toggle v-model="gradientDirection" mandatory>
  66.             <v-btn small text value="top">top</v-btn>
  67.             <v-btn small text value="right">right</v-btn>
  68.             <v-btn small text value="left">left</v-btn>
  69.             <v-btn small text value="bottom">bottom</v-btn>
  70.           </v-btn-toggle>
  71.         </v-row>
  72.       </v-col>
  74.       <v-col cols="12">
  75.         <v-slider
  76.           v-model="lineWidth"
  77.           label="Line width"
  78.           min="0.1"
  79.           max="10"
  80.           step="0.1"
  81.           thumb-label
  82.           :disabled="autoLineWidth"
  83.         ></v-slider>
  84.       </v-col>
  86.       <v-col cols="12">
  87.         <v-slider
  88.           v-model="radius"
  89.           label="Radius"
  90.           min="0"
  91.           max="16"
  92.           thumb-label
  93.         ></v-slider>
  94.       </v-col>
  96.       <v-col cols="12">
  97.         <v-slider
  98.           v-model="padding"
  99.           label="Padding"
  100.           min="0"
  101.           max="16"
  102.           thumb-label
  103.         ></v-slider>
  104.       </v-col>
  106.       <v-col cols="6">
  107.         <v-row class="fill-height" align="center">
  108.           <v-subheader class="pl-0">Linecap</v-subheader>
  109.           <v-btn-toggle v-model="lineCap" mandatory :disabled="type !== 'trend'">
  110.             <v-btn small text value="butt">butt</v-btn>
  111.             <v-btn small text value="round">round</v-btn>
  112.             <v-btn small text value="square">square</v-btn>
  113.           </v-btn-toggle>
  114.         </v-row>
  115.       </v-col>
  117.       <v-col cols="6">
  118.         <v-row justify="space-around">
  119.           <v-switch v-model="showLabels" label="Show labels"></v-switch>
  120.           <v-switch v-model="fill" label="Fill" :disabled="type !== 'trend'"></v-switch>
  121.           <v-switch v-model="autoLineWidth" label="Auto-line-width" :disabled="type !== 'bar'"></v-switch>
  122.         </v-row>
  123.       </v-col>
  125.       <v-col v-if="showLabels" cols="12">
  126.         <v-slider
  127.           v-model="labelSize"
  128.           label="Label size"
  129.           min="1"
  130.           max="20"
  131.           thumb-label
  132.         ></v-slider>
  133.       </v-col>
  134.     </v-row>
  135.   </v-container>
  136. </template>
  1. <script>
  2.   const gradients = [
  3.     ['#222'],
  4.     ['#42b3f4'],
  5.     ['red', 'orange', 'yellow'],
  6.     ['purple', 'violet'],
  7.     ['#00c6ff', '#F0F', '#FF0'],
  8.     ['#f72047', '#ffd200', '#1feaea'],
  9.   ]
  11.   export default {
  12.     data: () => ({
  13.       showLabels: false,
  14.       lineWidth: 2,
  15.       labelSize: 7,
  16.       radius: 10,
  17.       padding: 8,
  18.       lineCap: 'round',
  19.       gradient: gradients[5],
  20.       value: [0, 2, 5, 9, 5, 10, 3, 5, -4, -10, 1, 8, 2, 9, 0],
  21.       gradientDirection: 'top',
  22.       gradients,
  23.       fill: false,
  24.       type: 'trend',
  25.       autoLineWidth: false,
  26.     }),
  27.   }
  28. </script>

Sparklines（迷你图表） - 图3

示例

下面是一些简单到复杂的例子。

填充

您可以使用 fill 属性创建一个 v-sparkline 。

template script

  1. <template>
  2.   <v-container fluid>
  3.     <v-sparkline
  4.       :fill="fill"
  5.       :gradient="gradient"
  6.       :line-width="width"
  7.       :padding="padding"
  8.       :smooth="radius || false"
  9.       :value="value"
  10.       auto-draw
  11.     ></v-sparkline>
  13.     <v-divider></v-divider>
  15.     <v-row>
  16.       <v-col
  17.         cols="12"
  18.         md="6"
  19.       >
  20.         <v-row class="fill-height" align="center">
  21.           <v-item-group v-model="gradient" mandatory>
  22.             <v-row>
  23.               <v-item
  24.                 v-for="(gradient, i) in gradients"
  25.                 :key="i"
  26.                 v-slot:default="{ active, toggle }"
  27.                 :value="gradient"
  28.               >
  29.                 <v-card
  30.                   :style="{
  31.                     background: gradient.length > 1
  32.                       ? `linear-gradient(0deg, ${gradient})`
  33.                       : gradient[0],
  34.                     border: '2px solid',
  35.                     borderColor: active ? '#222' : 'white'
  36.                   }"
  37.                   width="30"
  38.                   height="30"
  39.                   class="mr-2"
  40.                   @click.native="toggle"
  41.                 ></v-card>
  42.               </v-item>
  43.             </v-row>
  44.           </v-item-group>
  45.         </v-row>
  46.       </v-col>
  48.       <v-col
  49.         cols="12"
  50.         md="6"
  51.       >
  52.         <v-slider
  53.           v-model="width"
  54.           label="Width"
  55.           min="0.1"
  56.           max="10"
  57.           step="0.1"
  58.           thumb-label
  59.         ></v-slider>
  60.       </v-col>
  62.       <v-col cols="6">
  63.         <v-row class="fill-height" align="center">
  64.           <v-switch v-model="fill" label="Filled"></v-switch>
  65.         </v-row>
  66.       </v-col>
  68.       <v-col
  69.         cols="12"
  70.         md="6"
  71.       >
  72.         <v-slider
  73.           v-model="radius"
  74.           label="Radius"
  75.           min="0"
  76.           max="25"
  77.           thumb-label
  78.         ></v-slider>
  79.       </v-col>
  81.       <v-col
  82.         cols="12"
  83.         md="6"
  84.         offset-md="6"
  85.       >
  86.         <v-slider
  87.           v-model="padding"
  88.           label="Padding"
  89.           min="0"
  90.           max="25"
  91.           thumb-label
  92.         ></v-slider>
  93.       </v-col>
  94.     </v-row>
  95.   </v-container>
  96. </template>
  1. <script>
  2.   const gradients = [
  3.     ['#222'],
  4.     ['#42b3f4'],
  5.     ['red', 'orange', 'yellow'],
  6.     ['purple', 'violet'],
  7.     ['#00c6ff', '#F0F', '#FF0'],
  8.     ['#f72047', '#ffd200', '#1feaea'],
  9.   ]
  11.   export default {
  12.     data: () => ({
  13.       fill: true,
  14.       gradient: gradients[4],
  15.       gradients,
  16.       padding: 8,
  17.       radius: 10,
  18.       value: [0, 2, 5, 9, 5, 10, 3, 5, 0, 0, 1, 8, 2, 9, 0],
  19.       width: 2,
  20.     }),
  21.   }
  22. </script>

Sparklines（迷你图表） - 图4

休息一下

对于简明扼要的信息，完整的图表可能有点过头。 使用具有梯度的趋势线可以为用户提供足够的细节，而不会显示太多信息。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     color="grey lighten-4"
  5.     max-width="600"
  6.   >
  7.     <v-card-title>
  8.       <v-icon
  9.         :color="checking ? 'red lighten-2' : 'indigo'"
  10.         class="mr-12"
  11.         size="64"
  12.         @click="takePulse"
  13.       >
  14.         mdi-heart-pulse
  15.       </v-icon>
  16.       <v-row align="start">
  17.         <div class="caption grey--text text-uppercase">
  18.           Heart rate
  19.         </div>
  20.         <div>
  21.           <span
  22.             class="display-2 font-weight-black"
  23.             v-text="avg || '—'"
  24.           ></span>
  25.           <strong v-if="avg">BPM</strong>
  26.         </div>
  27.       </v-row>
  29.       <v-spacer></v-spacer>
  31.       <v-btn icon class="align-self-start" size="28">
  32.         <v-icon>mdi-arrow-right-thick</v-icon>
  33.       </v-btn>
  34.     </v-card-title>
  36.     <v-sheet color="transparent">
  37.       <v-sparkline
  38.         :key="String(avg)"
  39.         :smooth="16"
  40.         :gradient="['#f72047', '#ffd200', '#1feaea']"
  41.         :line-width="3"
  42.         :value="heartbeats"
  43.         auto-draw
  44.         stroke-linecap="round"
  45.       ></v-sparkline>
  46.     </v-sheet>
  47.   </v-card>
  48. </template>
  1. <script>
  2.   const exhale = ms =>
  3.     new Promise(resolve => setTimeout(resolve, ms))
  5.   export default {
  6.     data: () => ({
  7.       checking: false,
  8.       heartbeats: [],
  9.     }),
  11.     computed: {
  12.       avg () {
  13.         const sum = this.heartbeats.reduce((acc, cur) => acc + cur, 0)
  14.         const length = this.heartbeats.length
  16.         if (!sum && !length) return 0
  18.         return Math.ceil(sum / length)
  19.       },
  20.     },
  22.     created () {
  23.       this.takePulse(false)
  24.     },
  26.     methods: {
  27.       heartbeat () {
  28.         return Math.ceil(Math.random() * (120 - 80) + 80)
  29.       },
  30.       async takePulse (inhale = true) {
  31.         this.checking = true
  33.         inhale && await exhale(1000)
  35.         this.heartbeats = Array.from({ length: 20 }, this.heartbeat)
  37.         this.checking = false
  38.       },
  39.     },
  40.   }
  41. </script>

Sparklines（迷你图表） - 图5

Material Dashboard Pro

Vuetify Material Dashboard PRO is a beautiful theme built over Vuetify, Vuex and Vuejs. Vuetify Material Dashboard PRO is the official Vuejs version of the Original Material Dashboard PRO.

ads by Vuetify

](https://www.creative-tim.com/product/vuetify-material-dashboard-pro?ref=vuetifyjs.com&partner=116160)

仪表盘卡片

v-sparkline 组件可以与 v-card 和 v-sheet 很好地组合，创建定制的信息卡，完美的管理仪表板。这里，我们使用自定义标签为迷你图表提供额外的上下文。

template script style

  1. <template>
  2.   <v-card
  3.     class="mt-4 mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-sheet
  7.       class="v-sheet--offset mx-auto"
  8.       color="cyan"
  9.       elevation="12"
  10.       max-width="calc(100% - 32px)"
  11.     >
  12.       <v-sparkline
  13.         :labels="labels"
  14.         :value="value"
  15.         color="white"
  16.         line-width="2"
  17.         padding="16"
  18.       ></v-sparkline>
  19.     </v-sheet>
  21.     <v-card-text class="pt-0">
  22.       <div class="title font-weight-light mb-2">User Registrations</div>
  23.       <div class="subheading font-weight-light grey--text">Last Campaign Performance</div>
  24.       <v-divider class="my-2"></v-divider>
  25.       <v-icon
  26.         class="mr-2"
  27.         small
  28.       >
  29.         mdi-clock
  30.       </v-icon>
  31.       <span class="caption grey--text font-weight-light">last registration 26 minutes ago</span>
  32.     </v-card-text>
  33.   </v-card>
  34. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       labels: [
  5.         '12am',
  6.         '3am',
  7.         '6am',
  8.         '9am',
  9.         '12pm',
  10.         '3pm',
  11.         '6pm',
  12.         '9pm',
  13.       ],
  14.       value: [
  15.         200,
  16.         675,
  17.         410,
  18.         390,
  19.         310,
  20.         460,
  21.         250,
  22.         240,
  23.       ],
  24.     }),
  25.   }
  26. </script>
  1. <style>
  2.   .v-sheet--offset {
  3.     top: -24px;
  4.     position: relative;
  5.   }
  6. </style>

Sparklines（迷你图表） - 图6

自定义标签

通过提供 label 插槽，我们可以修改显示的内容并添加美元符号（$）。 此插槽是 exclusively 用于文本内容。 有关 svg <text> 元素的更多信息，请 navigate here。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto text-center"
  4.     color="green"
  5.     dark
  6.     max-width="600"
  7.   >
  8.     <v-card-text>
  9.       <v-sheet color="rgba(0, 0, 0, .12)">
  10.         <v-sparkline
  11.           :value="value"
  12.           color="rgba(255, 255, 255, .7)"
  13.           height="100"
  14.           padding="24"
  15.           stroke-linecap="round"
  16.           smooth
  17.         >
  18.           <template v-slot:label="item">
  19.             ${{ item.value }}
  20.           </template>
  21.         </v-sparkline>
  22.       </v-sheet>
  23.     </v-card-text>
  25.     <v-card-text>
  26.       <div class="display-1 font-weight-thin">Sales Last 24h</div>
  27.     </v-card-text>
  29.     <v-divider></v-divider>
  31.     <v-card-actions class="justify-center">
  32.       <v-btn block text>Go to Report</v-btn>
  33.     </v-card-actions>
  34.   </v-card>
  35. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       value: [
  5.         423,
  6.         446,
  7.         675,
  8.         510,
  9.         590,
  10.         610,
  11.         760,
  12.       ],
  13.     }),
  14.   }
  15. </script>

Sparklines（迷你图表） - 图7