当遇到需要在网页上绘制图表的场景时，一般会使用两个库：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 轻量级图表组件的详细内容。