一个微小的动画迷你图图表组件，还支持曲线图，条形图/柱形图，饼图，动态数据渲染，工具提示和参考线等。

安装和下载：

# NPM
$ npm install vue-sparklines --save

如何使用它：

1.安装并导入迷你图图表组件。

2.创建一个基本的迷你图。

<sparkline :indicatorStyles="spIndicatorStyles1">
  <sparklineLine :data="spData1" :limit="spData1.length" :styles="spLineStyles1" />
</sparkline>

export default {
  data () {
    return {
      spData1: (() => {
        const len = 50
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spIndicatorStyles1: false,
      spLineStyles1: {
        stroke: '#54a5ff'
      }
    }
  }
}

3.创建曲线图。

<sparkline>
  <sparklineCurve :data="spData2" :limit="spData2.length" :styles="spCurveStyles2" />
</sparkline>

export default {
  data () {
    return {
      spData2: (() => {
        const len = 10
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spCurveStyles2: {
        stroke: '#54a5ff'
      }
    }
  }
}

4.创建一个柱形图。

<sparkline>
  <sparklineBar
  :data="spData4"
  :margin="spMargin4"
  :limit="spData4.length"
  :styles="spBarStyles4"
  :refLineStyles="spRefLineStyles4" />
</sparkline>

export default {
  data () {
    return {
      spData4: (() => {
        const len = 10
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spMargin4: 2,
      spBarStyles4: {
        fill: '#54a5ff'
      },
      spLineStyles4: {
        stroke: '#d14'
      },
      spRefLineStyles4: {
        stroke: '#d14',
        strokeOpacity: 1,
        strokeDasharray: '3, 3'
      }
    }
  }
}

5.创建一个混合图表。

<sparkline :styles="spStyles5">
  <sparklineLine :data="spData5" :limit="spData5.length" :styles="spLineStyles5" />
  <sparklineLine :data="spData6" :limit="spData6.length" :styles="spLineStyles6" />
</sparkline>

export default {
  data () {
    return {
      spStyles5: {
        background: '#ddd'
      },
      spData5: (() => {
        const len = 10
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spLineStyles5: {
        stroke: '#54a5ff'
      },
      spData6: (() => {
        const len = 30
        return Array.from({
          length: len
        }, () => Math.floor(Math.random() * len))
      })(),
      spLineStyles6: {
        stroke: '#d14'
      }
    }
  }
}

6.创建一个饼图。

<sparkline width="30">
  <sparklinePie :data="spData9" />
</sparkline>

export default {
  data () {
    return {
      spData9: this.rndData2()
    }
  },
  methods: {
    rndData2 (len = 20) {
      return Array.from({
        length: len % 2 === 0 ? 1 : 3
      }, () => {
        return {
          value: Math.floor(Math.random() * (len + 5)),
          color: `#${Math.floor(Math.random() * 16777215).toString(16)}`
        }
      })
    }
  },
  created () {
    setInterval(() => {
      this.spData9 = this.rndData2()
    }, 5000)
  }
}