Vue轻量级图表组件

当遇到需要在网页上绘制图表的场景时，一般会使用两个库：D3.js 和 Chart.js 。但其实你根本不需要这么重量级的库。有时候你只希望使用简单的 SVG 图表就能满足你的需求，这时候你可以使用 Frappe Charts 。它是一个能提供全功能、交互式动画的轻量级图表，并配合上简单的组件包装器，你就可以与 Vue.js 一起使用了！

开始安装

开始安装组件 vue2-frappe，这里我假设你是在现有的一个 Vue.js 项目上工作：

$ npm install --save vue2-frappe

下一步注册组件：

import Vue from &＃39;vue&＃39;;
import VueFrappe from &＃39;vue2-frappe&＃39;;
import App from &＃39;./App.vue&＃39;;
Vue.use(VueFrappe);
new Vue({
  el: &＃39;#app&＃39;,
  render: h => h(App)
});

开始绘制图表

vue2-frappe 是基于 Frappe Charts 之上的一个层，将其封装为可用 Vue.js 使用的组件，更多使用请见 Frappe Chart 的文档 ：

Frappe Charts 支持各式各样的图标，如饼图、条线图、比例图、热图等，更多高级的显示选项，请见其 官方文档！

推荐教程：《JS教程》

以上就是Vue 轻量级图表组件的详细内容，更多请关注 第一PHP社区 其它相关文章！