如何用RoughViz在Vue.js中绘制草图型图表，实现长尾词效果？

本文共计1558个文字，预计阅读时间需要7分钟。

介绍+图表是数据的图形表示，用于使数据集更易于阅读，并便于区分各部分。尽管大多数用户偏好简洁而正式的图表，但一些用户更喜欢手绘或简略的图表，这被称为roug。

介绍

图表是数据的图形表示，用于使数据集更易于阅读，并且易于区分各部分。虽然大多数用户习惯于看到简洁而正式的图表，但一些用户更喜欢看到手绘或素描的图表，这就是 roughViz 的用武之地。

roughViz 是一个基于 D3.js 和 Rough.js 的 JavaScript 库。该库旨在帮助构建看起来像草图或手绘图的图表，如下例所示。

在本指南中，你将学习如何使用 vue-roughviz 在 Vue.js 应用程序中显示类似草图的图表，以及如何使用 vue-cli 配置 Vue 应用程序。

先决条件

本教程假定满足以下先决条件：

• 对 Vue.js 的基本了解
• Node.js 的本地开发环境，以及对 Node 软件包管理器（npm）的熟悉
• 文本编辑器，例如 Visual Studio Code 或 Atom
  

开始

如果尚未安装 vue-cli，请运行以下命令以安装最新版本。

npm install -g @vue/cli # OR yarn global add @vue/cli

现在，创建一个新的 vue 应用程序：

vue create my-app

注意：此过程可能需要几分钟。