当遇到需要在网页上绘制图表的场景时，一般会使用两个库：D3.js 和 Chart.js 。但其实你根本不需要这么重量级的库。有时候你只希望使用简单的 SVG 图表就能满足你的需求，这时候你可以使用 Frappe Charts 。它是一个能提供全功能、交互式动画的轻量级图表，并配合上简单的组件包装器，你就可以与 Vue.js 一起使用了！
开始安装
开始安装组件 vue2-frappe，这里我假设你是在现有的一个 Vue.js 项目上工作：
$ npm install --save vue2-frappe
登录后复制
下一步注册组件：
立即学习“前端免费学习笔记（深入）”；
import Vue from 'vue';import VueFrappe from 'vue2-frappe';import App from './App.vue';Vue.use(VueFrappe);new Vue({ el: '#app', render: h => h(App)});
登录后复制
开始绘制图表
vue2-frappe 是基于 Frappe Charts 之上的一个层，将其封装为可用 Vue.js 使用的组件，更多使用请见 Frappe Chart 的文档 ：
export default { name: 'app', data() { return { benedictsWeight2017: [480, 485, 491, 489, 485, 490, 497, 510, 512, 521, 530, 545], benedictsWeight2018: [540, 575, 570, 555, 572, 580, 585, 587, 588, 590, 592, 590] } }}Chart: Benedict's Weight
Conclusion: Benedict needs to go on a diet.
登录后复制
Frappe Charts 支持各式各样的图标，如饼图、条线图、比例图、热图等，更多高级的显示选项，请见其 官方文档！
推荐教程：《JS教程》
以上就是Vue 轻量级图表组件的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2728147.html
