这次给小伙伴们推荐的是2个基于vue.js创建的超炫酷实用的图表组件vue-chart。

1、VueChart

vue-chart 是一个基于 vue.js + chart.js 构建可复用的超漂亮 Vue 图表组件。

安装

$ npm i @seregpie/vue-chart -S

使用组件

<template>
  <div>
    <vue-chart
      style="width: 800px; height: 600px;"
      :data="chartData"
      :options="{scales: {yAxes: [{ticks: {beginAtZero: true}}]}}"
      :update-config="{duration: 2000, easing: 'easeOutBounce'}"
      type="line"
    />
  </div>
</template>

<script>
import VueChart from '@seregpie/vue-chart';

export default {
  components: {
    VueChart
  },
  
  data() {
    return {
      chartData: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
          data: [12, 19, 3, 5, 2, 3],
          backgroundColor: [
            'rgba(255, 199, 132, 0.2)', 'rgba(154, 162, 235, 0.2)',
            'rgba(255, 206, 186, 0.2)', 'rgba(175, 192, 192, 0.2)',
            'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 164, 0.2)'
          ],
          borderColor: [
            'rgba(255, 199, 132, 1)', 'rgba(154, 162, 235, 1)',
            'rgba(255, 206, 186, 1)', 'rgba(175, 192, 192, 1)',
            'rgba(153, 102, 255, 1)', 'rgba(255, 159, 164, 1)'
          ],
          borderWidth: 1
        }]
      }
    }
  },
};
</script>

组件参数

提供各种精美图表组件演示示例

附上示例及仓库地址

# 官网文档
https://www.chartjs.org/

# 演示地址
https://seregpie.github.io/VueChart/

# github地址
https://github.com/SeregPie/VueChart

2、VueChartKick

vue-chartkick 号称只用一行代码就可以创建炫酷图表的 vue.js 组件。

安装

$ npm i vue-chartkick chart.js -S

使用组件

<!--引入组件-->
import Vue from 'vue'
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'

Vue.use(Chartkick.use(Chart))

<!--模板使用-->
<template>
  <div>
	<pie-chart :data="[['Blueberry', 66], ['Strawberry', 18]]"></pie-chart>
	<bar-chart :data="[['Work', 32], ['Play', 1987]]"></bar-chart>
	<line-chart
	  width="800px"
	  height="500px"
	  xtitle="Time"
	  ytitle="Month"
      :data="chartData"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      chartData: [["Jan", 4], ["Feb", 2], ["Mar", 10], ["Apr", 5], ["May", 3]]
    }
  },
};
</script>

同样提供了各种丰富的演示示例

# 演示地址
https://chartkick.com/vue

# github地址
https://github.com/ankane/vue-chartkick

需要做图表统计的同学，绝对不要错过，可以去尝试下哈！如果觉得对你有帮助可以给个赞或转发，多谢支持！