使用Vue.js和Chart.js构建HTML5画布图表 – vue-chart

使用Vue.js和Chart.js构建HTML5画布图表 – vue-chart

插件名称:VueChart

发布时间:2020年4月10日

插件作者:SeregPie

官网 演示 GitHub下载

这是另一个Vue.js包装的chart.js,可以让你创建一个使用HTML5的画布图表。

支持图表类型:折线图,条形图,甜甜圈图,饼图和雷达图。

安装和下载:

# NPM
$ npm install @seregpie/vue-chart --save

用法:

1.安装并导入组件。

import Vue from 'vue';
import VueChart from '@seregpie/vue-chart';

2.注册组件。

Vue.component(VueChart.name, VueChart);
// 或
export default {
  components: {
    [VueChart.name]: VueChart,
  },
};

3.将图表组件插入您的应用程序模板。

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