vue的图表组件（2个超赞的Vue酷炫图表组件Vue-Chart）
vue的图表组件（2个超赞的Vue酷炫图表组件Vue-Chart）安装# 官网文档 https://www.chartjs.org/ # 演示地址 https://seregpie.github.io/VueChart/ # github地址 https://github.com/SeregPie/VueChart2、VueChartKickvue-chartkick 号称只用一行代码就可以创建炫酷图表的 vue.js 组件。<template> <div> <vue-chart style="width: 800px; height: 600px;" :data="chartData" :options="{scales: {yAxes: [{ticks: {beginAtZero: true}}]}}" :up
这次给小伙伴们推荐的是2个基于vue.js创建的超炫酷实用的图表组件vue-chart。
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
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
需要做图表统计的同学，绝对不要错过，可以去尝试下哈！如果觉得对你有帮助可以给个赞或转发，多谢支持！
