跟大家讲解下有关Vue 轻量级图表组件，相信小伙伴们对这个话题应该也很关注吧，现在就为小伙伴们说说Vue 轻量级图表组件，小编也收集到了有关Vue 轻量级图表组件的相关资料，希望大家看到了会喜欢。

当遇到需要在网页上绘制图表的场景时，一般会使用两个库：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 的文档 ：

<template> <div id="app"> <h2>Chart: Benedict's Weight</h2> <!-- id - 每一个图表必须有一个 id. --> <!-- title - 图表上方显示的标题 --> <!-- type - 图表的类型 线性图、饼图、条形图、等 --> <!-- labels - x 轴上的值 --> <!-- height- 可选，图表的高度 --> <!-- colors - 将每一个数据集进行颜色区分 --> <!-- lineOptions - 线形图的更多选项，请见文档--> <!-- datasets - 数据集，对象数组 --> <vue-frappe id="my-chart-id" title="Benedict's Weight From 2017-2018 (lbs)" type="line" :labels="['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']" :height="650" :colors="['#008F68', '#FAE042']" :lineOptions="{regionFill: 1}" :datasets="[ {name: '2017', values: benedictsWeight2017}, {name: '2018', values: benedictsWeight2018} ]" ></vue-frappe> <p>Conclusion: Benedict needs to go on a diet.</p> </div></template><script>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] } }}</script>

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

推荐教程：《JS教程》

以上就是Vue 轻量级图表组件的详细内容，更多请关注php中文网其它相关文章！

来源：php中文网